From ea9c26483af1d09974c1350ed8b30bcbce739125 Mon Sep 17 00:00:00 2001 From: Sebastien Dubois Date: Sat, 2 Jun 2018 20:58:35 +0200 Subject: [PATCH] fix(build): fixed webpack config and circular-dependency-plugin config. Closes #397, #315 --- README.md | 17 +++--- SNAPSHOTS.md | 6 ++ package.json | 4 +- packages/stark-build/config/nightly-build.js | 33 ---------- packages/stark-build/config/webpack.common.js | 56 +++++------------ packages/stark-build/config/webpack.dev.js | 8 --- packages/stark-build/config/webpack.prod.js | 60 +++++++++++++++---- packages/stark-build/package.json | 1 - packages/stark-core/package.json | 4 +- starter/package.json | 8 +-- 10 files changed, 89 insertions(+), 108 deletions(-) create mode 100644 SNAPSHOTS.md delete mode 100644 packages/stark-build/config/nightly-build.js diff --git a/README.md b/README.md index fc904bd5f4..189c35f0bc 100644 --- a/README.md +++ b/README.md @@ -38,7 +38,7 @@ Stark's reusable build integrates support for: * [Tree shaking](https://webpack.js.org/guides/tree-shaking/) to automatically remove unused code from your production bundle * [Hot Module Replacement](https://webpack.github.io/docs/hot-module-replacement-with-webpack.html) with [@angularclass/hmr](https://github.com/angularclass/angular-hmr) and [@angularclass/hmr-loader](https://github.com/angularclass/angular-hmr-loader) * Minification & uglyfication -* Cache busting with [file hashes](https://www.npmjs.com/package/webpack-sha-hash) +* Cache busting with file hashes * [Tests](https://angular.io/docs/ts/latest/guide/testing.html): [E2E](https://angular.github.io/protractor/#/faq#what-s-the-difference-between-karma-and-protractor-when-do-i-use-which-), [Karma](https://karma-runner.github.io/), [Protractor](https://angular.github.io/protractor/), [Jasmine](https://github.com/jasmine/jasmine), with source maps support, possibility to execute subsets of the tests, ... * Tests code coverage with [Istanbul](https://github.com/gotwarlost/istanbul) * Environments definition (development | production) @@ -47,17 +47,20 @@ Stark's reusable build integrates support for: * Local testing with fake back-ends using [json-server](https://github.com/typicode/json-server) * Router visualization with [UI-Router Visualizer](https://github.com/ui-router/visualizer) -## Stark modules -TODO list stark modules and point to docs - ## Developer guide TODO add links to developer guide sections +### Releases +Stark releases are available on npm: https://www.npmjs.com/settings/nationalbankbelgium/packages + ### Contributing -Please follow our [contribution guidelines](/CONTRIBUTING.md) +Please follow our [contribution guidelines](/CONTRIBUTING.md). + +To know how to release Stark, refer to [this page](/RELEASE.md). -### Releasing Stark -See [this page](/RELEASE.md) +### Snapshot builds +Each and every day, a new snapshot of Stark is built, tested and published on npm: https://www.npmjs.com/settings/nationalbankbelgium/packages +See [this page](/SNAPSHOTS.md) for more information about the process behind this. ## Authors diff --git a/SNAPSHOTS.md b/SNAPSHOTS.md new file mode 100644 index 0000000000..187aa84636 --- /dev/null +++ b/SNAPSHOTS.md @@ -0,0 +1,6 @@ +# Stark Snapshots +Daily snapshot builds are created and published by a Travis cron job. +This was introduced via [this issue](https://github.com/NationalBankBelgium/stark/issues/27). + +For details, refer to `.travis.yml` and `release-publish.sh` + \ No newline at end of file diff --git a/package.json b/package.json index 03fc7f4e59..14e8cbb302 100644 --- a/package.json +++ b/package.json @@ -53,7 +53,7 @@ "stylelint-config-prettier": "3.2.0", "tslint": "5.10.0", "tslint-config-prettier": "1.12.0", - "tslint-sonarts": "1.6.0", + "tslint-sonarts": "1.7.0", "typescript": "2.7.2", "uglify-es": "3.3.9", "zone.js": "0.8.26" @@ -96,7 +96,7 @@ "docs:starter:serve": "cd starter && npm run docs:serve && cd ..", "generate:changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0", "generate:changelog-recent": "conventional-changelog -p angular | tail -n +3", - "lint": "tslint --config tslint.json --project ./packages/tsconfig.json --format codeFrame", + "lint": "tslint --config ./tslint.json --project ./packages/tsconfig.json --format codeFrame", "lint:stark-core": "cd packages/stark-core && npm run lint && cd ../..", "lint:stark-ui": "cd packages/stark-ui && npm run lint && cd ../..", "lint:starter": "cd starter && npm run lint && cd ..", diff --git a/packages/stark-build/config/nightly-build.js b/packages/stark-build/config/nightly-build.js deleted file mode 100644 index 327ada0a1d..0000000000 --- a/packages/stark-build/config/nightly-build.js +++ /dev/null @@ -1,33 +0,0 @@ -"use strict"; - -const helpers = require("./helpers"); -const fs = require("fs"); -const packageJSONPath = helpers.root("/package.json"); - -console.log("Preparation of the package.json for the nighly build..."); - -var packageJSON = require(packageJSONPath); -packageJSON["version"] = getNightlyVersionString(packageJSON["version"]); -fs.writeFileSync(packageJSONPath, JSON.stringify(packageJSON)); - -// Code from https://github.com/Microsoft/TypeScript/blob/master/scripts/configureNightly.ts -function getNightlyVersionString(versionString) { - // If the version string already contains "-dev", - // then get the base string and update based on that. - const dashNightlyPos = versionString.indexOf("-dev"); - if (dashNightlyPos >= 0) { - versionString = versionString.slice(0, dashNightlyPos); - } - - // We're going to append a representation of the current time at the end of the current version. - // String.prototype.toISOString() returns a 24-character string formatted as 'YYYY-MM-DDTHH:mm:ss.sssZ', - // but we'd prefer to just remove separators and limit ourselves to YYYYMMDD. - // UTC time will always be implicit here. - const now = new Date(); - const timeStr = now - .toISOString() - .replace(/:|T|\.|-/g, "") - .slice(0, 8); - - return `${versionString}-dev.${timeStr}`; -} diff --git a/packages/stark-build/config/webpack.common.js b/packages/stark-build/config/webpack.common.js index 9c4dc3ec32..5bda430d16 100644 --- a/packages/stark-build/config/webpack.common.js +++ b/packages/stark-build/config/webpack.common.js @@ -9,16 +9,15 @@ const commonData = require("./webpack.common-data.js"); // common configuration * problem with copy-webpack-plugin */ // const DefinePlugin = require("webpack/lib/DefinePlugin"); -const SplitChunksPlugin = require("webpack/lib/optimize/SplitChunksPlugin"); const CopyWebpackPlugin = require("copy-webpack-plugin"); const HtmlWebpackPlugin = require("html-webpack-plugin"); const BaseHrefWebpackPlugin = require("base-href-webpack-plugin").BaseHrefWebpackPlugin; -const HashedModuleIdsPlugin = require("webpack/lib/HashedModuleIdsPlugin"); // const InlineManifestWebpackPlugin = require("inline-manifest-webpack-plugin"); // const ScriptExtHtmlWebpackPlugin = require("script-ext-html-webpack-plugin"); const { AngularCompilerPlugin } = require("@ngtools/webpack"); const AngularNamedLazyChunksWebpackPlugin = require("angular-named-lazy-chunks-webpack-plugin"); const ContextReplacementPlugin = require("webpack/lib/ContextReplacementPlugin"); +const CircularDependencyPlugin = require("circular-dependency-plugin"); const PurifyPlugin = require("@angular-devkit/build-optimizer").PurifyPlugin; const buildUtils = require("./build-utils"); @@ -28,7 +27,7 @@ const buildUtils = require("./build-utils"); * * See: http://webpack.github.io/docs/configuration.html#cli */ -module.exports = function(options) { +module.exports = (options) => { const isProd = options.ENV === "production"; const METADATA = Object.assign({}, buildUtils.DEFAULT_METADATA, options.metadata || {}); const supportES2015 = buildUtils.supportES2015(METADATA.tsConfigPath); @@ -178,11 +177,16 @@ module.exports = function(options) { // TsLint loader support for *.ts files // reference: https://github.com/wbuchwalter/tslint-loader + // FIXME: given the warnings we have with build:prod (see https://github.com/NationalBankBelgium/stark/issues/397) + // this probably doesn't load the tslint configuration we think? { enforce: "pre", test: /\.ts$/, use: ["tslint-loader"], - exclude: [helpers.root("node_modules")] + exclude: [helpers.root("node_modules")], + options: { + typeCheck: false, // FIXME remove this line once the type checking issues are gone (cfr FIXME above) + } }, // Source map loader support for *.js files @@ -365,31 +369,13 @@ module.exports = function(options) { new PurifyPlugin(), - /** - * Plugin: CommonsChunkPlugin - * Description: Shares common code between the pages. - * It identifies common modules and put them into a commons chunk. - * - * See: https://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin - * See: https://github.com/webpack/docs/wiki/optimization#multi-page-app - */ - // FIXME Configure splitChunks - // new CommonsChunkPlugin({ - // name: "polyfills", - // chunks: ["polyfills"] - // }), - // - // new CommonsChunkPlugin({ - // minChunks: Infinity, - // name: "inline" - // }), - // new CommonsChunkPlugin({ - // name: "main", - // async: "common", - // children: true, - // minChunks: 2 - // }), - + new CircularDependencyPlugin({ + // exclude detection of files based on a RegExp + exclude: /node_modules/, + // log warnings to webpack + failOnError: false + }), + /** * Plugin: CopyWebpackPlugin * Description: Copy files and directories in webpack. @@ -457,18 +443,6 @@ module.exports = function(options) { {} ), - /** - * Plugin: HashedModuleIdsPlugin - * Description: This plugin will cause hashes to be based on the relative path of the module, - * generating a four character string as the module id - * See: https://webpack.js.org/plugins/hashed-module-ids-plugin/ - */ - new HashedModuleIdsPlugin({ - hashFunction: "sha256", - hashDigest: "hex", - hashDigestLength: 20 - }), - /** * Plugin: ContextReplacementPlugin * Description: allows to override the inferred information in a 'require' context diff --git a/packages/stark-build/config/webpack.dev.js b/packages/stark-build/config/webpack.dev.js index 22058fe1b6..843ca2db4a 100644 --- a/packages/stark-build/config/webpack.dev.js +++ b/packages/stark-build/config/webpack.dev.js @@ -13,7 +13,6 @@ const SourceMapDevToolPlugin = require("webpack/lib/SourceMapDevToolPlugin"); const WriteFilePlugin = require("write-file-webpack-plugin"); const StylelintPlugin = require("stylelint-webpack-plugin"); -const CircularDependencyPlugin = require("circular-dependency-plugin"); // Dev custom config const webpackCustomConfig = require(helpers.root("config/webpack-custom-config.dev.json")); @@ -272,13 +271,6 @@ module.exports = function(env) { files: ["src/**/*.?(pc|sc|c|sa)ss"] // pcss|scss|css|sass }), - new CircularDependencyPlugin({ - // exclude detection of files based on a RegExp - exclude: /node_modules/, - // log warnings to webpack - failOnError: false - }), - /** * Plugin: WebpackMonitor * Description: This plugins give us information about the bundle size diff --git a/packages/stark-build/config/webpack.prod.js b/packages/stark-build/config/webpack.prod.js index 05564fabed..474d6129d4 100644 --- a/packages/stark-build/config/webpack.prod.js +++ b/packages/stark-build/config/webpack.prod.js @@ -21,6 +21,7 @@ const PurifyPlugin = require("@angular-devkit/build-optimizer").PurifyPlugin; const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin"); const UglifyJsPlugin = require("uglifyjs-webpack-plugin"); +const HashedModuleIdsPlugin = require("webpack/lib/HashedModuleIdsPlugin"); function getUglifyOptions(supportES2015) { const uglifyCompressOptions = { @@ -71,9 +72,20 @@ module.exports = function() { mode: "production", + // reference: https://medium.com/webpack/webpack-4-mode-and-optimization-5423a6bc597a optimization: { + removeAvailableModules: true, + removeEmptyChunks: true, + mergeDuplicateChunks: true, + flagIncludedChunks: true, + occurrenceOrder: true, + providedExports: true, + usedExports: true, + sideEffects: true, concatenateModules: true, - minimizer: [ + runtimeChunk: true, + noEmitOnErrors: true, + minimizer: [ // minimization libraries to use /** * Plugin: UglifyJsPlugin * Description: Minimize all JavaScript output of chunks. @@ -84,20 +96,41 @@ module.exports = function() { * NOTE: To debug prod builds uncomment //debug lines and comment //prod lines */ new UglifyJsPlugin({ - sourceMap: true, + sourceMap: true, // useful to still be able to debug in production uglifyOptions: getUglifyOptions(supportES2015) }), + // other options than Uglify: BabelifyMinifyWebpackPlugin or ClosureCompilerPlugin new OptimizeCSSAssetsPlugin({}) ], - cacheGroups: { - styles: { - name: "styles", - test: /\.css$/, - chunks: "all", - enforce: true + splitChunks: { // reference: https://webpack.js.org/plugins/split-chunks-plugin/ + chunks: "all", // include all types of chunks (async or not) + cacheGroups: { // assign modules to cache groups + // cache group for all modules from node_modules that are duplicated in at least 2 chunks + vendors: { + test: /[\\/]node_modules[\\/]/, + name: "vendor", + chunks: "all", + priority: -10 + }, + styles: { + name: "styles", + test: /\.css$/, + chunks: "all", + enforce: true + }, + // FIXME check if needed + // polyfills: { + // name: "polyfills", + // chunks: ["polyfills"] + // }, + default: { + minChunks: 2, + priority: -20, + reuseExistingChunk: true + } } - } + }, }, /** @@ -284,9 +317,16 @@ module.exports = function() { new PurifyPlugin() /* buildOptimizer */, /** + * Plugin: HashedModuleIdsPlugin + * Description: This plugin will cause hashes to be based on the relative path of the module, + * generating a four character string as the module id * See: https://webpack.js.org/plugins/hashed-module-ids-plugin/ */ - new HashedModuleIdsPlugin() + new HashedModuleIdsPlugin({ + hashFunction: "sha256", + hashDigest: "hex", + hashDigestLength: 20 + }), ] }); }; diff --git a/packages/stark-build/package.json b/packages/stark-build/package.json index 782fe6a08c..e7647c51fc 100644 --- a/packages/stark-build/package.json +++ b/packages/stark-build/package.json @@ -74,7 +74,6 @@ "webpack-dll-bundles-plugin": "1.0.0-beta.5", "webpack-merge": "4.1.2", "webpack-monitor": "1.0.14", - "webpack-sha-hash": "2.0.0", "write-file-webpack-plugin": "4.3.1" }, "devDependencies": { diff --git a/packages/stark-core/package.json b/packages/stark-core/package.json index d62a90197e..70398d5af9 100644 --- a/packages/stark-core/package.json +++ b/packages/stark-core/package.json @@ -6,7 +6,7 @@ "esm5": "./esm5/stark-core.js", "esm2015": "./esm2015/stark-core.js", "fesm5": "./fesm5/stark-core.js", - "fesm2015": "fesm2015/stark-core.js", + "fesm2015": "./fesm2015/stark-core.js", "main": "bundles/stark-core.umd.js", "types": "stark-core.d.ts", "description": "Stark - Core", @@ -63,7 +63,7 @@ "docs:coverage": "npm run docs -- --coverageTest --coverageThresholdFail true", "docs:serve": "npm run docs -- --watch --serve --port 4321", "ngc": "node ./../node_modules/@angular/compiler-cli/src/main.js -p tsconfig-build.json", - "lint": "node ../../node_modules/tslint/bin/tslint --config tslint.json --project ./tsconfig.spec.json --format codeFrame", + "lint": "node ../../node_modules/tslint/bin/tslint --config ./tslint.json --project ./tsconfig.spec.json --format codeFrame", "test-fast": "node ./node_modules/@nationalbankbelgium/stark-testing/node_modules/karma/bin/karma start ./karma.conf.typescript.js", "test-fast:ci": "node ./node_modules/@nationalbankbelgium/stark-testing/node_modules/karma/bin/karma start karma.conf.typescript.ci.js", "tsc": "node ../../node_modules/typescript/bin/tsc -p tsconfig-build.json", diff --git a/starter/package.json b/starter/package.json index 6222a4cc62..2e22d49310 100644 --- a/starter/package.json +++ b/starter/package.json @@ -122,8 +122,8 @@ "@angular/platform-server": "6.0.2", "@angular/router": "6.0.2", "@mdi/angular-material": "2.3.54", - "@nationalbankbelgium/stark-core": "file:../dist/packages-dist/stark-core/nationalbankbelgium-stark-core-10.0.0-alpha.2-ec1568a.tgz", - "@nationalbankbelgium/stark-ui": "file:../dist/packages-dist/stark-ui/nationalbankbelgium-stark-ui-10.0.0-alpha.2-ec1568a.tgz", + "@nationalbankbelgium/stark-core": "file:../dist/packages-dist/stark-core/nationalbankbelgium-stark-core-10.0.0-alpha.2-9f4cd05.tgz", + "@nationalbankbelgium/stark-ui": "file:../dist/packages-dist/stark-ui/nationalbankbelgium-stark-ui-10.0.0-alpha.2-9f4cd05.tgz", "@uirouter/visualizer": "6.0.0", "core-js": "2.5.6", "eligrey-classlist-js-polyfill": "1.2.20180112", @@ -138,8 +138,8 @@ "zone.js": "0.8.26" }, "devDependencies": { - "@nationalbankbelgium/stark-build": "file:../dist/packages-dist/stark-build/nationalbankbelgium-stark-build-10.0.0-alpha.2-ec1568a.tgz", - "@nationalbankbelgium/stark-testing": "file:../dist/packages-dist/stark-testing/nationalbankbelgium-stark-testing-10.0.0-alpha.2-ec1568a.tgz", + "@nationalbankbelgium/stark-build": "file:../dist/packages-dist/stark-build/nationalbankbelgium-stark-build-10.0.0-alpha.2-9f4cd05.tgz", + "@nationalbankbelgium/stark-testing": "file:../dist/packages-dist/stark-testing/nationalbankbelgium-stark-testing-10.0.0-alpha.2-9f4cd05.tgz", "@types/core-js": "0.9.46", "@types/hammerjs": "2.0.35", "@types/node": "8.10.15",