From 8a882a9b8ffedba90ef13160229f9049b8daa0a5 Mon Sep 17 00:00:00 2001 From: Eduard Kyvenko Date: Mon, 6 Aug 2018 18:08:20 +0200 Subject: [PATCH] feat(package.json, webpack.config.dev.js, webpack.config.prod.js): Upgrade Babel setup and enable transpilation of third-party code More context in: https://github.com/facebook/create-react-app/pull/3776 BREAKING CHANGE: Now we compile third-party JavaScript code with Babel. fix #217 --- config/webpack.config.dev.js | 55 +++++++++++++++++++++++++---------- config/webpack.config.prod.js | 52 +++++++++++++++++++++++---------- package.json | 10 +++---- 3 files changed, 81 insertions(+), 36 deletions(-) diff --git a/config/webpack.config.dev.js b/config/webpack.config.dev.js index 81751808..8bc8c626 100644 --- a/config/webpack.config.dev.js +++ b/config/webpack.config.dev.js @@ -72,44 +72,67 @@ module.exports = { rules: [ { test: /\.js$/, - exclude: [/elm-stuff/, /node_modules/], + exclude: [/[/\\\\]elm-stuff[/\\\\]/, /[/\\\\]node_modules[/\\\\]/], + include: paths.appSrc, loader: require.resolve('babel-loader'), query: { - // Latest stable ECMAScript features presets: [ [ - require.resolve('babel-preset-env'), + require.resolve('@babel/preset-env'), { - targets: { - // React parses on ie 9, so we should too - ie: 9, - // We currently minify with uglify - // Remove after https://github.com/mishoo/UglifyJS2/issues/448 - uglify: true - }, - // Disable polyfill transforms - useBuiltIns: false, + // `entry` transforms `@babel/polyfill` into individual requires for + // the targeted browsers. This is safer than `usage` which performs + // static code analysis to determine what's required. + // This is probably a fine default to help trim down bundles when + // end-users inevitably import '@babel/polyfill'. + useBuiltIns: 'entry', // Do not transform modules to CJS modules: false } ] ], plugins: [ + // Polyfills the runtime needed for async/await and generators [ - require.resolve('babel-plugin-transform-runtime'), + require('@babel/plugin-transform-runtime').default, { helpers: false, - polyfill: false, regenerator: true } ] ] } }, - + // Process any JS outside of the app with Babel. + // Unlike the application JS, we only compile the standard ES features. + { + test: /\.js$/, + use: [ + { + loader: require.resolve('babel-loader'), + options: { + babelrc: false, + compact: false, + presets: [ + [ + // Latest stable ECMAScript features + require('@babel/preset-env').default, + { + // Do not transform modules to CJS + modules: false + } + ] + ], + cacheDirectory: true, + highlightCode: true + } + } + ] + }, { test: /\.elm$/, - exclude: [/elm-stuff/, /node_modules/], + include: paths.appSrc, + exclude: [/[/\\\\]elm-stuff[/\\\\]/, /[/\\\\]node_modules[/\\\\]/], use: [ { loader: require.resolve('elm-hot-loader') diff --git a/config/webpack.config.prod.js b/config/webpack.config.prod.js index 7ba710e4..3d214d37 100644 --- a/config/webpack.config.prod.js +++ b/config/webpack.config.prod.js @@ -95,44 +95,66 @@ module.exports = { rules: [ { test: /\.js$/, - exclude: [/elm-stuff/, /node_modules/], + exclude: [/[/\\\\]elm-stuff[/\\\\]/, /[/\\\\]node_modules[/\\\\]/], loader: require.resolve('babel-loader'), query: { // Latest stable ECMAScript features presets: [ [ - require.resolve('babel-preset-env'), + require.resolve('@babel/preset-env'), { - targets: { - // React parses on ie 9, so we should too - ie: 9, - // We currently minify with uglify - // Remove after https://github.com/mishoo/UglifyJS2/issues/448 - uglify: true - }, - // Disable polyfill transforms - useBuiltIns: false, + // `entry` transforms `@babel/polyfill` into individual requires for + // the targeted browsers. This is safer than `usage` which performs + // static code analysis to determine what's required. + // This is probably a fine default to help trim down bundles when + // end-users inevitably import '@babel/polyfill'. + useBuiltIns: 'entry', // Do not transform modules to CJS modules: false } ] ], plugins: [ + // Polyfills the runtime needed for async/await and generators [ - require.resolve('babel-plugin-transform-runtime'), + require('@babel/plugin-transform-runtime').default, { helpers: false, - polyfill: false, regenerator: true } ] ] } }, - + // Process any JS outside of the app with Babel. + // Unlike the application JS, we only compile the standard ES features. + { + test: /\.js$/, + use: [ + { + loader: require.resolve('babel-loader'), + options: { + babelrc: false, + compact: false, + presets: [ + [ + // Latest stable ECMAScript features + require('@babel/preset-env').default, + { + // Do not transform modules to CJS + modules: false + } + ] + ], + cacheDirectory: true, + highlightCode: true + } + } + ] + }, { test: /\.elm$/, - exclude: [/elm-stuff/, /node_modules/], + exclude: [/[/\\\\]elm-stuff[/\\\\]/, /[/\\\\]node_modules[/\\\\]/], use: [ // string-replace-loader works as InterpolateHtmlPlugin for Elm, // it replaces all of the %PUBLIC_URL% with the URL of your diff --git a/package.json b/package.json index d7529d2e..adbf792e 100644 --- a/package.json +++ b/package.json @@ -17,13 +17,13 @@ } }, "dependencies": { + "@babel/cli": "7.0.0-beta.56", + "@babel/core": "7.0.0-beta.56", + "@babel/plugin-transform-runtime": "7.0.0-beta.56", + "@babel/preset-env": "7.0.0-beta.56", "assets-webpack-plugin": "^3.5.1", "autoprefixer": "^8.0.0", - "babel-cli": "^6.26.0", - "babel-core": "^6.26.0", - "babel-loader": "^7.1.2", - "babel-plugin-transform-runtime": "^6.23.0", - "babel-preset-env": "^1.6.1", + "babel-loader": "8.0.0-beta.4", "babel-runtime": "^6.26.0", "chalk": "^2.3.1", "clean-webpack-plugin": "^0.1.18",