Spliting de modulos con require.ensure
This commit is contained in:
parent
aa85fade20
commit
3f36562dae
|
@ -1 +1,3 @@
|
|||
import {ng} from '@salix/vendor'
|
||||
import {bootstrap} from './bootstrap';
|
||||
import * as spliting from './spliting'
|
||||
bootstrap();
|
|
@ -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]);
|
||||
};
|
|
@ -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");
|
||||
};
|
|
@ -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');
|
|
@ -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',
|
||||
|
|
|
@ -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);
|
||||
|
||||
|
|
|
@ -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;
|
||||
}
|
|
@ -0,0 +1,3 @@
|
|||
import * as vendors from '@salix/vendor'
|
||||
import * as core from '@salix/core'
|
||||
console.log('crud');
|
|
@ -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')
|
|
@ -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');
|
21
index.html
21
index.html
|
@ -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>
|
|
@ -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'
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
|
|
Loading…
Reference in New Issue