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

@ -34,4 +34,14 @@ 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>
<title>Salix</title> <head>
</head> <title>Salix</title>
<div id ="app"> </head>
<body>
<div id="app">
{{1+1}}
</div> </div>
<body> <script type="text/javascript" src="build/salix.app.js" selector="#app"></script>
<script type="text/javascript" src="build/salix.vendor.js"></script> </body>
<script type="text/javascript" src="build/salix.core.js"></script> </html>
<script type="text/javascript" src="build/salix.app.js"></script>
</body>
</html>

View File

@ -1,44 +1,38 @@
var webpack = require ('webpack'); var webpack = require('webpack');
var path = require ('path'); var path = require('path');
module.exports = module.exports =
{ {
entry: { entry: {
'salix.vendor': ['@salix/vendor'], 'salix.app': ['@salix/app']
'salix.core': ['@salix/core'], },
'salix.app': ['@salix/app'] output: {
}, path: path.join(__dirname, 'build'),
output: { filename: '[name].js',
path: path.join (__dirname, 'build'), publicPath: 'build/',
filename: '[name].js', chunkFilename: "[name].js"
publicPath: 'build/' },
}, module: {
module: { loaders: [
loaders: [ {
{ test: /\.js$/,
test: /\.js$/, loader: 'babel',
loader: 'babel', exclude: /node_modules/,
exclude: /node_modules/, query: {
query: { presets: ['es2015']
presets: ['es2015'] }
}, {
test: /\.html$/,
loader: 'raw'
} }
},{ ]
test: /\.html$/, },
loader: 'raw' resolve: {
} modulesDirectories: [
] __dirname,
}, 'node_modules'
resolve: { ]
modulesDirectories: [ }
__dirname, };
'node_modules'
]
},
plugins: [
new webpack.optimize.CommonsChunkPlugin ({
name: 'salix.vendor'
})
]
};