Spliting de modulos con require.ensure

This commit is contained in:
PedroHurtado 2016-10-05 07:55:53 +02:00
parent aa85fade20
commit 3f36562dae
12 changed files with 114 additions and 58 deletions

View File

@ -1 +1,3 @@
import {ng} from '@salix/vendor' import {bootstrap} from './bootstrap';
import * as spliting from './spliting'
bootstrap();

17
@salix/app/src/bootstrap.js vendored Normal file
View File

@ -0,0 +1,17 @@
import {ng} from '@salix/vendor';
import {NAME} from '@salix/core';
export const bootstrap = () => {
const selector = 'selector'
let _script = document.currentScript || (() => {
let scripts = document.getElementsByTagName('script');
return scripts[scripts.length - 1];
})();
let _element = _script && document.querySelector(_script.getAttribute(selector));
if (!_element) {
throw new Error("element is not defined");
}
ng.bootstrap(_element, [NAME]);
};

View File

@ -0,0 +1,20 @@
const crud = () => {
require.ensure([], () => {
require('@salix/crud')
}, "salix.crud");
};
const compras = () => {
require.ensure([], () => {
require('@salix/compras')
}, "salix.compras");
};
const ventas = () => {
require.ensure([], () => {
require('@salix/ventas')
}, "salix.ventas");
};
const pagos = () => {
require.ensure([], () => {
require('@salix/pagos')
}, "salix.pagos");
};

4
@salix/compras/index.js Normal file
View File

@ -0,0 +1,4 @@
import * as core from '@salix/core'
import * as vendors from '@salix/vendor'
import * as crud from '@salix/crud'
console.log('compras');

View File

@ -7,7 +7,6 @@ import * as util from '../util';
export const NAME = util.getName(BUTTON_NAME); export const NAME = util.getName(BUTTON_NAME);
directive.$inject =[resolveFactory.NAME]; directive.$inject =[resolveFactory.NAME];
export function directive (resolve){ export function directive (resolve){
return{ return{
require:'E', require:'E',

View File

@ -1,9 +1,7 @@
import {ng} from '@salix/vendor'; import * as vendors from '@salix/vendor';
import {EMPTYDEPENDECIES} from './constants'; import {getModuleName,getVendorDependencies} from './util';
import {getModuleName} from './util';
const DEPENDENCIES = getVendorDependencies(vendors)
export const NAME = getModuleName('core'); export const NAME = getModuleName('core');
export const module = vendors.ng.module(NAME,DEPENDENCIES);
export const module = ng.module(NAME,EMPTYDEPENDECIES);

View File

@ -35,3 +35,13 @@ export function getProviderName(name){
export function getTemplateName(componentName,frameworkName){ export function getTemplateName(componentName,frameworkName){
return componentName + '.' + frameworkName + '.' + '.html' return componentName + '.' + frameworkName + '.' + '.html'
} }
export function getVendorDependencies(vendors){
let dependencies = [];
Object.keys(vendors).forEach((vendor)=>{
let name = vendors[vendor].name;
if(name){
dependencies.push(name)
}
});
return dependencies;
}

3
@salix/crud/index.js Normal file
View File

@ -0,0 +1,3 @@
import * as vendors from '@salix/vendor'
import * as core from '@salix/core'
console.log('crud');

6
@salix/pagos/index.js Normal file
View File

@ -0,0 +1,6 @@
import * as core from '@salix/core'
import * as vendors from '@salix/vendor'
import * as crud from '@salix/crud'
import * as ventas from '@salix/ventas'
import * as compras from '@salix/compras'
console.log('pagos')

4
@salix/ventas/index.js Normal file
View File

@ -0,0 +1,4 @@
import * as core from '@salix/core'
import * as vendors from '@salix/vendor'
import * as crud from '@salix/crud'
console.log('ventas');

View File

@ -1,14 +1,13 @@
<!doctype html> <!doctype html>
<html> <html>
<head> <head>
<title>Salix</title> <title>Salix</title>
</head> </head>
<div id ="app">
</div>
<body> <body>
<script type="text/javascript" src="build/salix.vendor.js"></script> <div id="app">
<script type="text/javascript" src="build/salix.core.js"></script> {{1+1}}
<script type="text/javascript" src="build/salix.app.js"></script> </div>
<script type="text/javascript" src="build/salix.app.js" selector="#app"></script>
</body> </body>
</html> </html>

View File

@ -5,14 +5,13 @@ var path = require ('path');
module.exports = module.exports =
{ {
entry: { entry: {
'salix.vendor': ['@salix/vendor'],
'salix.core': ['@salix/core'],
'salix.app': ['@salix/app'] 'salix.app': ['@salix/app']
}, },
output: { output: {
path: path.join(__dirname, 'build'), path: path.join(__dirname, 'build'),
filename: '[name].js', filename: '[name].js',
publicPath: 'build/' publicPath: 'build/',
chunkFilename: "[name].js"
}, },
module: { module: {
loaders: [ loaders: [
@ -34,11 +33,6 @@ module.exports =
__dirname, __dirname,
'node_modules' 'node_modules'
] ]
}, }
plugins: [
new webpack.optimize.CommonsChunkPlugin ({
name: 'salix.vendor'
})
]
}; };