From 9432b2aa60542b155da2f3f9a893d571a42f9f4d Mon Sep 17 00:00:00 2001 From: Denys Vuika Date: Mon, 12 Dec 2016 14:20:12 +0000 Subject: [PATCH] webpack: production settings (#1226) * vendor libraries * vendor libraries settings * additional vendor libs settings * production settings for i18n * fix pdfs and favicon paths * readme update * code cleanup --- demo-shell-ng2/README.md | 36 +++++++--- demo-shell-ng2/app/app.component.ts | 9 ++- demo-shell-ng2/app/polyfills.ts | 4 ++ demo-shell-ng2/app/vendor.ts | 37 ++++++++++ demo-shell-ng2/config/webpack.common.js | 5 ++ demo-shell-ng2/config/webpack.prod.js | 67 +++++++++++++++--- demo-shell-ng2/index.html | 27 ------- demo-shell-ng2/package.json | 4 +- demo-shell-ng2/{app => public}/css/app.css | 0 .../css}/material.orange-blue.min.css | 0 .../{app => public}/css/muli-font.css | 0 .../{app => public}/fonts/Muli-Italic.ttf | Bin .../{app => public}/fonts/Muli-Light.ttf | Bin .../fonts/Muli-LightItalic.ttf | Bin .../{app => public}/fonts/Muli-Regular.ttf | Bin .../fonts/material-icons.woff2 | 0 demo-shell-ng2/{app => public}/js/Polyline.js | 0 demo-shell-ng2/tslint.json | 4 +- 18 files changed, 141 insertions(+), 52 deletions(-) rename demo-shell-ng2/{app => public}/css/app.css (100%) rename demo-shell-ng2/{assets => public/css}/material.orange-blue.min.css (100%) rename demo-shell-ng2/{app => public}/css/muli-font.css (100%) rename demo-shell-ng2/{app => public}/fonts/Muli-Italic.ttf (100%) rename demo-shell-ng2/{app => public}/fonts/Muli-Light.ttf (100%) rename demo-shell-ng2/{app => public}/fonts/Muli-LightItalic.ttf (100%) rename demo-shell-ng2/{app => public}/fonts/Muli-Regular.ttf (100%) rename demo-shell-ng2/{app => public}/fonts/material-icons.woff2 (100%) rename demo-shell-ng2/{app => public}/js/Polyline.js (100%) diff --git a/demo-shell-ng2/README.md b/demo-shell-ng2/README.md index 1c6d7688bf..13db6efa47 100644 --- a/demo-shell-ng2/README.md +++ b/demo-shell-ng2/README.md @@ -10,28 +10,42 @@

-### Node -To correctly use this demo check that on your machine is running Node version 5.0.0 or higher. +## Installing -#### Local build - -1 Install dependencies +To correctly use this demo check that on your machine is running Node version 6.9.2 LTS or higher. ```sh npm install ``` -2 Fast build and watch for dev purposes +## Development build ```sh npm start ``` ->`start` script also includes live reload and watchers for all the `.ts` files. -TypeScript watchers are also configured for `node_modules` folder within demo shell -and provide live reload for all the component libraries as well. +This command compiles and starts the project in watch mode. +Browser will automatically reload upon changes. +Upon start you can navigate to `http://localhost:3000` with your preferred browser. -#### Development branch build +## Production build + +```sh +npm run build +``` + +This command builds broject in `production` mode. +All output is placed to `dist` folder and can be served your preferred web server. +You should need no additional files outside the `dist` folder. + +In order to quickly test the output you can use the [wsrv](https://www.npmjs.com/package/wsrv) tool (lightweight web server): + +```sh +npm install -g wsrv +wsrv -s -o dist/ +``` + +## Development branch build If you want to run the demo shell with the latest change from the development branch, use the following command from the /script folder: @@ -40,7 +54,7 @@ If you want to run the demo shell with the latest change from the development br ./start-linked.sh -install ``` -###Multi-language +## Multi-language To support a new language you need to create your language file (.json) and add it to `i18n/` folder. ```json diff --git a/demo-shell-ng2/app/app.component.ts b/demo-shell-ng2/app/app.component.ts index 325593eb17..d382b24916 100644 --- a/demo-shell-ng2/app/app.component.ts +++ b/demo-shell-ng2/app/app.component.ts @@ -48,8 +48,13 @@ export class AppComponent { this.setProvider(); if (translate) { - translate.addTranslationFolder('custom', 'custom-translation/'); - translate.addTranslationFolder('ng2-alfresco-login', 'custom-translation/alfresco-login'); + if (process.env.ENV === 'production') { + translate.addTranslationFolder('custom', 'i18n/custom-translation'); + translate.addTranslationFolder('ng2-alfresco-login', 'i18n/custom-translation/alfresco-login'); + } else { + translate.addTranslationFolder('custom', 'custom-translation/'); + translate.addTranslationFolder('ng2-alfresco-login', 'custom-translation/alfresco-login'); + } } } diff --git a/demo-shell-ng2/app/polyfills.ts b/demo-shell-ng2/app/polyfills.ts index 222ff23446..c279c6f18f 100644 --- a/demo-shell-ng2/app/polyfills.ts +++ b/demo-shell-ng2/app/polyfills.ts @@ -1,5 +1,9 @@ import 'core-js/es6'; import 'core-js/es7/reflect'; + +// IE 8-11 +require('script!element.scrollintoviewifneeded-polyfill/index.js'); + require('zone.js/dist/zone'); if (process.env.ENV === 'production') { diff --git a/demo-shell-ng2/app/vendor.ts b/demo-shell-ng2/app/vendor.ts index e7a4cbf671..8e907a1064 100644 --- a/demo-shell-ng2/app/vendor.ts +++ b/demo-shell-ng2/app/vendor.ts @@ -12,5 +12,42 @@ import 'rxjs'; // Other vendors for example jQuery, Lodash or Bootstrap // You can import js, ts, css, sass, ... +// Google Material Design Lite +import '../public/css/material.orange-blue.min.css'; +import 'material-design-lite/material.min'; +import 'material-design-icons/iconfont/material-icons.css'; + +// Flags +import 'flag-icon-css/css/flag-icon.min.css'; + +// Polyfill(s) for dialogs +import 'dialog-polyfill/dialog-polyfill'; +import 'dialog-polyfill/dialog-polyfill.css'; + +// app content +import '../public/css/app.css'; +import '../public/css/muli-font.css'; + import 'ng2-activiti-form/stencils/runtime.ng1'; import 'ng2-activiti-form/stencils/runtime.adf'; + +require('script!../public/js/Polyline.js'); +import 'chart.js'; + +require('script!moment/min/moment.min.js'); + +import 'md-date-time-picker/dist/css/mdDateTimePicker.css'; +require('script!md-date-time-picker/dist/js/mdDateTimePicker.min.js'); +require('script!md-date-time-picker/dist/js/draggabilly.pkgd.min.js'); + +require('pdfjs-dist/web/compatibility.js'); + +// Setting worker path to worker bundle. +let pdfjsLib = require('pdfjs-dist'); +if (process.env.ENV === 'production') { + pdfjsLib.PDFJS.workerSrc = './pdf.worker.js'; +} else { + pdfjsLib.PDFJS.workerSrc = '../../node_modules/pdfjs-dist/build/pdf.worker.js'; +} + +require('pdfjs-dist/web/pdf_viewer.js'); diff --git a/demo-shell-ng2/config/webpack.common.js b/demo-shell-ng2/config/webpack.common.js index fd4f384f09..148f0c9aef 100644 --- a/demo-shell-ng2/config/webpack.common.js +++ b/demo-shell-ng2/config/webpack.common.js @@ -106,6 +106,11 @@ module.exports = { }, plugins: [ + + new webpack.ProvidePlugin({ + 'dialogPolyfill': 'dialog-polyfill/dialog-polyfill' + }), + new webpack.optimize.CommonsChunkPlugin({ name: ['app', 'vendor', 'polyfills'] }), diff --git a/demo-shell-ng2/config/webpack.prod.js b/demo-shell-ng2/config/webpack.prod.js index ee9cce2943..74758e8f65 100644 --- a/demo-shell-ng2/config/webpack.prod.js +++ b/demo-shell-ng2/config/webpack.prod.js @@ -1,6 +1,7 @@ var webpack = require('webpack'); var webpackMerge = require('webpack-merge'); var ExtractTextPlugin = require('extract-text-webpack-plugin'); +var CopyWebpackPlugin = require('copy-webpack-plugin'); var commonConfig = require('./webpack.common.js'); var helpers = require('./helpers'); @@ -21,18 +22,66 @@ module.exports = webpackMerge(commonConfig, { }, plugins: [ - new webpack.NoErrorsPlugin(), - new webpack.optimize.DedupePlugin(), - new webpack.optimize.UglifyJsPlugin({ // https://github.com/angular/angular/issues/10618 - mangle: { - keep_fnames: true - } - }), - new ExtractTextPlugin('[name].[hash].css'), + // Define env variables to help with builds + // Reference: https://webpack.github.io/docs/list-of-plugins.html#defineplugin new webpack.DefinePlugin({ 'process.env': { 'ENV': JSON.stringify(ENV) } - }) + }), + + // Reference: http://webpack.github.io/docs/list-of-plugins.html#noerrorsplugin + // Only emit files when there are no errors + new webpack.NoErrorsPlugin(), + + // Reference: http://webpack.github.io/docs/list-of-plugins.html#dedupeplugin + // Dedupe modules in the output + new webpack.optimize.DedupePlugin(), + + // Reference: http://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin + // Minify all javascript, switch loaders to minimizing mode + new webpack.optimize.UglifyJsPlugin({ // https://github.com/angular/angular/issues/10618 + mangle: { + keep_fnames: true + }, + compressor: { + screw_ie8: true, + warnings: false + } + }), + + // Extract css files + // Reference: https://github.com/webpack/extract-text-webpack-plugin + // Disabled when in test mode or not in build mode + new ExtractTextPlugin('[name].[hash].css'), + + // Copy assets from the public folder + // Reference: https://github.com/kevlened/copy-webpack-plugin + new CopyWebpackPlugin([ + { + from: 'favicon-96x96.png' + }, + { + from: 'node_modules/pdfjs-dist/build/pdf.worker.js', + to: 'pdf.worker.js' + }, + { + context: 'custom-translation', + from: '**/*.json', + to: 'i18n/custom-translation' + }, + // Copy i18n folders for all modules with ng2-alfresco- prefix + { + context: 'node_modules', + from: 'ng2-alfresco-*/dist/src/i18n/*.json', + to: 'node_modules' + }, + // Copy i18n folders for all modules with ng2-activiti- prefix + { + context: 'node_modules', + from: 'ng2-activiti-*/dist/src/i18n/*.json', + to: 'node_modules' + } + ]) ] }); diff --git a/demo-shell-ng2/index.html b/demo-shell-ng2/index.html index 8f0c22b8c5..984baef300 100644 --- a/demo-shell-ng2/index.html +++ b/demo-shell-ng2/index.html @@ -5,19 +5,8 @@ Demo Application - Angular 2 - - - - - - - - - - - @@ -25,22 +14,6 @@ - - - - - - - - - - - - - - - -