From 3f36562dae2c981629987a68c104fa373523313b Mon Sep 17 00:00:00 2001 From: PedroHurtado Date: Wed, 5 Oct 2016 07:55:53 +0200 Subject: [PATCH] Spliting de modulos con require.ensure --- @salix/app/src/app.js | 4 +- @salix/app/src/bootstrap.js | 17 ++++++++ @salix/app/src/spliting.js | 20 +++++++++ @salix/compras/index.js | 4 ++ @salix/core/src/button/button.js | 1 - @salix/core/src/module.js | 10 ++--- @salix/core/src/util.js | 10 +++++ @salix/crud/index.js | 3 ++ @salix/pagos/index.js | 6 +++ @salix/ventas/index.js | 4 ++ index.html | 21 +++++----- webpack.config.js | 72 +++++++++++++++----------------- 12 files changed, 114 insertions(+), 58 deletions(-) create mode 100644 @salix/app/src/bootstrap.js create mode 100644 @salix/app/src/spliting.js create mode 100644 @salix/compras/index.js create mode 100644 @salix/crud/index.js create mode 100644 @salix/pagos/index.js create mode 100644 @salix/ventas/index.js diff --git a/@salix/app/src/app.js b/@salix/app/src/app.js index e9fa3dc62..455437d97 100644 --- a/@salix/app/src/app.js +++ b/@salix/app/src/app.js @@ -1 +1,3 @@ -import {ng} from '@salix/vendor' \ No newline at end of file +import {bootstrap} from './bootstrap'; +import * as spliting from './spliting' +bootstrap(); \ No newline at end of file diff --git a/@salix/app/src/bootstrap.js b/@salix/app/src/bootstrap.js new file mode 100644 index 000000000..cb1dcaf4a --- /dev/null +++ b/@salix/app/src/bootstrap.js @@ -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]); +}; \ No newline at end of file diff --git a/@salix/app/src/spliting.js b/@salix/app/src/spliting.js new file mode 100644 index 000000000..a672cea56 --- /dev/null +++ b/@salix/app/src/spliting.js @@ -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"); +}; \ No newline at end of file diff --git a/@salix/compras/index.js b/@salix/compras/index.js new file mode 100644 index 000000000..8f9f54629 --- /dev/null +++ b/@salix/compras/index.js @@ -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'); \ No newline at end of file diff --git a/@salix/core/src/button/button.js b/@salix/core/src/button/button.js index 451cd0f80..9ccbe4701 100644 --- a/@salix/core/src/button/button.js +++ b/@salix/core/src/button/button.js @@ -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', diff --git a/@salix/core/src/module.js b/@salix/core/src/module.js index 08809e875..43b13f444 100644 --- a/@salix/core/src/module.js +++ b/@salix/core/src/module.js @@ -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); diff --git a/@salix/core/src/util.js b/@salix/core/src/util.js index e92258ea1..f6d0c9ea3 100644 --- a/@salix/core/src/util.js +++ b/@salix/core/src/util.js @@ -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; } \ No newline at end of file diff --git a/@salix/crud/index.js b/@salix/crud/index.js new file mode 100644 index 000000000..9044df30e --- /dev/null +++ b/@salix/crud/index.js @@ -0,0 +1,3 @@ +import * as vendors from '@salix/vendor' +import * as core from '@salix/core' +console.log('crud'); \ No newline at end of file diff --git a/@salix/pagos/index.js b/@salix/pagos/index.js new file mode 100644 index 000000000..83329dc8a --- /dev/null +++ b/@salix/pagos/index.js @@ -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') \ No newline at end of file diff --git a/@salix/ventas/index.js b/@salix/ventas/index.js new file mode 100644 index 000000000..3e815f50d --- /dev/null +++ b/@salix/ventas/index.js @@ -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'); \ No newline at end of file diff --git a/index.html b/index.html index 774ef01c5..beeef2f28 100644 --- a/index.html +++ b/index.html @@ -1,14 +1,13 @@ - - Salix - -
- + + + Salix + + +
+ {{1+1}}
- - - - - - + + + \ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js index 1565843b0..f21e733e0 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -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' + ] + } + };