feat(package.json, webpack.config.dev.js, webpack.config.prod.js): Up…

…grade Babel setup and enable transpilation of third-party code More context in: facebook/create-react-app#3776 BREAKING CHANGE: Now we compile third-party JavaScript code with Babel. fix #217
halfzebra · Aug 6, 2018 · 8a882a9 · 8a882a9
1 parent 5f9f1b7
commit 8a882a9
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 36 deletions.
diff --git 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
@@ -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
@@ -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",