From 2d335a1ecfc0d6d3a8040ca5b6edd3fc291956bb Mon Sep 17 00:00:00 2001 From: Eduard Kyvenko Date: Tue, 20 Mar 2018 19:45:15 +0100 Subject: [PATCH 01/23] chore(package.json): Extract the configuration for prettier to the external file --- .prettierrc | 3 +++ package.json | 2 +- 2 files changed, 4 insertions(+), 1 deletion(-) create mode 100644 .prettierrc diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 00000000..db1bca68 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,3 @@ +{ + singleQuote: true +} diff --git a/package.json b/package.json index adbf792e..5d2b4fb6 100644 --- a/package.json +++ b/package.json @@ -91,7 +91,7 @@ "scripts": { "cz": "git-cz", "eslint": "eslint .", - "prettier": "prettier --write --single-quote '{bin,config,scripts,template/src,tests}/**/*.js'", + "format": "prettier --write '{bin,config,scripts,template/src,tests}/**/*.js'", "semantic-release": "semantic-release", "test": "npm run test:cli && npm run test:functional", "test:cli": "mocha tests/cliAccessibility.js --reporter spec --timeout 15000", From 9a78f8421629e4fa2f4cd39fc9f6dd6c5aeb55ec Mon Sep 17 00:00:00 2001 From: Eduard Kyvenko Date: Tue, 20 Mar 2018 19:47:55 +0100 Subject: [PATCH 02/23] chore(Added lint-staged to the devDependencies and the setup for running it on precommit): --- package.json | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 5d2b4fb6..011fd968 100644 --- a/package.json +++ b/package.json @@ -61,6 +61,7 @@ "eslint": "^4.18.0", "eslint-plugin-prettier": "^2.6.0", "husky": "^0.14.3", + "lint-staged": "^7.0.0", "mocha": "^5.0.1", "nightmare": "^2.10.0", "prettier": "^1.10.2", @@ -97,6 +98,16 @@ "test:cli": "mocha tests/cliAccessibility.js --reporter spec --timeout 15000", "test:functional": "mocha tests/*.spec.js --reporter spec --timeout 15000", "build": "cd template && node ../bin/elm-app-cli.js build", - "start": "cd template && node ../bin/elm-app-cli.js start" + "start": "cd template && node ../bin/elm-app-cli.js start", + "precommit": "lint-staged" + }, + "lint-staged": { + "*.js": [ + "prettier --write", + "git add" + ], + "yarn.lock": [ + "git rm --cached" + ] } } From e0289d90e7f583d43b8f5b29244ddfbcb17536c7 Mon Sep 17 00:00:00 2001 From: Eduard Kyvenko Date: Tue, 20 Mar 2018 21:46:35 +0100 Subject: [PATCH 03/23] build(dev config): Added `case-sensitive-paths-webpack-plugin` for extra security --- config/webpack.config.dev.js | 94 ++++++++++++++++++++++++------------ package.json | 1 + 2 files changed, 65 insertions(+), 30 deletions(-) diff --git a/config/webpack.config.dev.js b/config/webpack.config.dev.js index 8bc8c626..2ed433a0 100644 --- a/config/webpack.config.dev.js +++ b/config/webpack.config.dev.js @@ -1,10 +1,9 @@ 'use strict'; -const path = require('path'); const autoprefixer = require('autoprefixer'); -const HotModuleReplacementPlugin = require('webpack/lib/HotModuleReplacementPlugin'); -const DefinePlugin = require('webpack/lib/DefinePlugin'); -const NamedModulesPlugin = require('webpack/lib/NamedModulesPlugin'); +const path = require('path'); +const webpack = require('webpack'); +const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin'); const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const getClientEnvironment = require('./env'); @@ -20,9 +19,32 @@ const publicUrl = ''; // Get environment variables to inject into our app. const env = getClientEnvironment(publicUrl); +// Options for PostCSS as we reference these options twice +// Adds vendor prefixing based on your specified browser support in +// package.json +const postCSSLoaderOptions = { + // Necessary for external CSS imports to work + // https://github.com/facebook/create-react-app/issues/2677 + ident: 'postcss', + plugins: () => [ + require('postcss-flexbugs-fixes'), + autoprefixer({ + flexbox: 'no-2009' + }) + ] +}; + +// 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. module.exports = { + mode: 'development', + // You may want 'eval' instead if you prefer to see the compiled output in DevTools. + // See the discussion in https://github.com/facebook/create-react-app/issues/343. devtool: 'cheap-module-source-map', - + // These are the "entry points" to our application. + // This means they will be the "root" imports that are included in JS bundle. + // The first two entry points enable "hot" CSS and auto-refreshes for JS. entry: [ // Include an alternative client for WebpackDevServer. A client's job is to // connect to WebpackDevServer by a socket and get notified about changes. @@ -44,6 +66,7 @@ module.exports = { ], output: { + // Add /* filename */ comments to generated require()s in the output. pathinfo: true, // The build folder. @@ -53,22 +76,33 @@ module.exports = { // served by WebpackDevServer in development. This is the JS bundle // containing code from all our entry points, and the Webpack runtime. filename: 'static/js/bundle.js', - + // There are also additional JS chunk files if you use code splitting. + chunkFilename: 'static/js/[name].chunk.js', + // This is the URL that app is served from. We use "/" in development. publicPath: publicPath, // Point sourcemap entries to original disk location (format as URL on Windows) devtoolModuleFilenameTemplate: info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/') }, - + optimization: { + // Automatically split vendor and commons + // https://twitter.com/wSokra/status/969633336732905474 + splitChunks: { + chunks: 'all' + }, + // Keep the runtime chunk seperated to enable long term caching + // https://twitter.com/wSokra/status/969679223278505985 + runtimeChunk: true + }, resolve: { modules: ['node_modules'], extensions: ['.js', '.elm'] }, - module: { noParse: /\.elm$/, + strictExportPresence: true, rules: [ { test: /\.js$/, @@ -169,8 +203,10 @@ module.exports = { // "style" loader turns CSS into JS modules that inject