From 6716fc06760ff3b2999f02b16687a1d6bc504a8c Mon Sep 17 00:00:00 2001 From: Alasdair McLeay Date: Fri, 1 Dec 2017 13:34:37 +0000 Subject: [PATCH 1/3] top level npm run build task --- package.json | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 7234cdc..30aac9c 100644 --- a/package.json +++ b/package.json @@ -2,9 +2,11 @@ "private": true, "name": "pcp-form-example", "scripts": { - "prepare": "lerna bootstrap", - "start": "lerna bootstrap && cd packages/web-server && npm start", - "storybook": "cd packages/presentational-components && npm start" + "build": "npm run bootstrap && lerna run build", + "prepare": "npm run bootstrap", + "bootstrap": "lerna bootstrap", + "start": "npm run bootstrap && cd packages/web-server && npm start", + "storybook": "npm run bootstrap && cd packages/presentational-components && npm start" }, "devDependencies": { "lerna": "^2.5.1" From d5c8e34c7a1b5beec1cc882cda7e9ffd0421b4e6 Mon Sep 17 00:00:00 2001 From: Alasdair McLeay Date: Fri, 1 Dec 2017 13:35:43 +0000 Subject: [PATCH 2/3] mapDependenciesToFolder for react and react-dom to avoid duplication --- packages/web-server/config/webpack.config.dev.js | 7 +++++++ packages/web-server/config/webpack.config.prod.js | 15 +++++++++++---- 2 files changed, 18 insertions(+), 4 deletions(-) diff --git a/packages/web-server/config/webpack.config.dev.js b/packages/web-server/config/webpack.config.dev.js index 463cb05..2987aae 100644 --- a/packages/web-server/config/webpack.config.dev.js +++ b/packages/web-server/config/webpack.config.dev.js @@ -22,6 +22,12 @@ const publicUrl = ''; // Get environment variables to inject into our app. const env = getClientEnvironment(publicUrl); +const mapDependenciesToFolder = (dependencies, folder) => + dependencies.reduce((accumulator, dependency) => ({ + [dependency]: path.resolve(`${folder}/${dependency}`), + ...accumulator + }), {}); + // This is the development configuration. // It is focused on developer experience and fast rebuilds. // The production configuration is different and lives in a separate file. @@ -88,6 +94,7 @@ module.exports = { // Support React Native Web // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/ 'react-native': 'react-native-web', + ...mapDependenciesToFolder(['react', 'react-dom'], './node_modules') }, plugins: [ // Prevents users from importing files from outside of src/ (or node_modules/). diff --git a/packages/web-server/config/webpack.config.prod.js b/packages/web-server/config/webpack.config.prod.js index 65c7e15..64392fc 100644 --- a/packages/web-server/config/webpack.config.prod.js +++ b/packages/web-server/config/webpack.config.prod.js @@ -46,6 +46,12 @@ const extractTextPluginOptions = shouldUseRelativeAssetPaths { publicPath: Array(cssFilename.split('/').length).join('../') } : {}; +const mapDependenciesToFolder = (dependencies, folder) => + dependencies.reduce((accumulator, dependency) => ({ + [dependency]: path.resolve(`${folder}/${dependency}`), + ...accumulator + }), {}); + // This is the production configuration. // It compiles slowly and is focused on producing a fast and minimal bundle. // The development configuration is different and lives in a separate file. @@ -90,10 +96,11 @@ module.exports = { // for React Native Web. extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'], alias: { - + // Support React Native Web // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/ 'react-native': 'react-native-web', + ...mapDependenciesToFolder(['react', 'react-dom'], './node_modules') }, plugins: [ // Prevents users from importing files from outside of src/ (or node_modules/). @@ -121,7 +128,7 @@ module.exports = { options: { formatter: eslintFormatter, eslintPath: require.resolve('eslint'), - + }, loader: require.resolve('eslint-loader'), }, @@ -149,7 +156,7 @@ module.exports = { include: paths.appSrc, loader: require.resolve('babel-loader'), options: { - + compact: true, }, }, @@ -274,7 +281,7 @@ module.exports = { }, mangle: { safari10: true, - }, + }, output: { comments: false, // Turned on because emoji and regex is not minified properly using default From 8c6ec33ff474d1da4a85ebdbf510fc0b715abd0d Mon Sep 17 00:00:00 2001 From: Alasdair McLeay Date: Fri, 1 Dec 2017 13:52:31 +0000 Subject: [PATCH 3/3] add DuplicatePackageCheckerPlugin to webpack build --- .../web-server/config/webpack.config.dev.js | 2 ++ .../web-server/config/webpack.config.prod.js | 2 ++ packages/web-server/package-lock.json | 34 ++++++++++++++++++- packages/web-server/package.json | 3 ++ 4 files changed, 40 insertions(+), 1 deletion(-) diff --git a/packages/web-server/config/webpack.config.dev.js b/packages/web-server/config/webpack.config.dev.js index 2987aae..cee3b1b 100644 --- a/packages/web-server/config/webpack.config.dev.js +++ b/packages/web-server/config/webpack.config.dev.js @@ -9,6 +9,7 @@ const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin'); const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin'); const eslintFormatter = require('react-dev-utils/eslintFormatter'); const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin'); +const DuplicatePackageCheckerPlugin = require('duplicate-package-checker-webpack-plugin'); const getClientEnvironment = require('./env'); const paths = require('./paths'); @@ -225,6 +226,7 @@ module.exports = { ], }, plugins: [ + new DuplicatePackageCheckerPlugin(), // Makes some environment variables available in index.html. // The public URL is available as %PUBLIC_URL% in index.html, e.g.: // diff --git a/packages/web-server/config/webpack.config.prod.js b/packages/web-server/config/webpack.config.prod.js index 64392fc..0d5ca24 100644 --- a/packages/web-server/config/webpack.config.prod.js +++ b/packages/web-server/config/webpack.config.prod.js @@ -10,6 +10,7 @@ const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin'); const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin'); const eslintFormatter = require('react-dev-utils/eslintFormatter'); const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin'); +const DuplicatePackageCheckerPlugin = require('duplicate-package-checker-webpack-plugin'); const paths = require('./paths'); const getClientEnvironment = require('./env'); @@ -241,6 +242,7 @@ module.exports = { ], }, plugins: [ + new DuplicatePackageCheckerPlugin(), // Makes some environment variables available in index.html. // The public URL is available as %PUBLIC_URL% in index.html, e.g.: // diff --git a/packages/web-server/package-lock.json b/packages/web-server/package-lock.json index e2e841d..fb4ea83 100644 --- a/packages/web-server/package-lock.json +++ b/packages/web-server/package-lock.json @@ -1,6 +1,8 @@ { - "requires": true, + "name": "web-server", + "version": "0.0.1", "lockfileVersion": 1, + "requires": true, "dependencies": { "abab": { "version": "1.0.4", @@ -2596,6 +2598,30 @@ "readable-stream": "2.3.3" } }, + "duplicate-package-checker-webpack-plugin": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/duplicate-package-checker-webpack-plugin/-/duplicate-package-checker-webpack-plugin-2.0.1.tgz", + "integrity": "sha512-/cL6znAY7Dlwl1P/uIDJaX1Iucx1NkyJVnBSxJC2l+DtJjVRHe3QCGx7cg21tACJJXAvhCY1fWYgQhI6/LwM4w==", + "dev": true, + "requires": { + "chalk": "2.3.0", + "find-root": "1.1.0", + "lodash": "4.17.4" + }, + "dependencies": { + "chalk": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.3.0.tgz", + "integrity": "sha512-Az5zJR2CBujap2rqXGaJKaPHyJ0IrUimvYNX+ncCy8PJP4ltOGTrHUIo097ZaL2zMeKYpiCdqDvS6zdrTFok3Q==", + "dev": true, + "requires": { + "ansi-styles": "3.2.0", + "escape-string-regexp": "1.0.5", + "supports-color": "4.5.0" + } + } + } + }, "ecc-jsbn": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz", @@ -3464,6 +3490,12 @@ "pkg-dir": "2.0.0" } }, + "find-root": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz", + "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==", + "dev": true + }, "find-up": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz", diff --git a/packages/web-server/package.json b/packages/web-server/package.json index dab882e..77172e2 100644 --- a/packages/web-server/package.json +++ b/packages/web-server/package.json @@ -98,5 +98,8 @@ }, "eslintConfig": { "extends": "react-app" + }, + "devDependencies": { + "duplicate-package-checker-webpack-plugin": "^2.0.1" } }