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);
directive.$inject =[resolveFactory.NAME];
export function directive (resolve){
return{
require:'E',

View File

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

View File

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

View File

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