Compile dependencies with babel-preset-env (facebook#3776)

zmitry · Jan 15, 2018 · 33eeb41 · 33eeb41
1 parent ab6f23f
commit 33eeb41
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 2 deletions.
diff --git a/config/webpack.config.dev.js b/config/webpack.config.dev.js
@@ -159,7 +159,8 @@ module.exports = {
               name: 'static/media/[name].[hash:8].[ext]',
             },
           },
-          // Process JS with Babel.
+          // Process application JS with Babel.
+          // The preset includes JSX, Flow, and some ESnext features.
           {
             test: /\.(js|jsx|mjs)$/,
             include: paths.appSrc,
@@ -175,6 +176,18 @@ module.exports = {
               cacheDirectory: true,
             },
           },
+          // Process any JS outside of the app with Babel.
+          // Unlike the application JS, we only compile the standard ES features.
+          {
+            test: /\.js$/,
+            loader: require.resolve('babel-loader'),
+            options: {
+              babelrc: false,
+              compact: false,
+              presets: [require.resolve('babel-preset-react-app/dependencies')],
+              cacheDirectory: true,
+            },
+          },
           // "postcss" loader applies autoprefixer to our CSS.
           // "css" loader resolves paths in CSS and adds assets as dependencies.
           // "style" loader turns CSS into JS modules that inject <style> tags.

diff --git a/config/webpack.config.prod.js b/config/webpack.config.prod.js
@@ -167,7 +167,8 @@ module.exports = {
               name: 'static/media/[name].[hash:8].[ext]',
             },
           },
-          // Process JS with Babel.
+          // Process application JS with Babel.
+          // The preset includes JSX, Flow, and some ESnext features.
           {
             test: /\.(js|jsx|mjs)$/,
             include: paths.appSrc,
@@ -180,6 +181,18 @@ module.exports = {
               compact: true,
             },
           },
+          // Process any JS outside of the app with Babel.
+          // Unlike the application JS, we only compile the standard ES features.
+          {
+            test: /\.js$/,
+            loader: require.resolve('babel-loader'),
+            options: {
+              babelrc: false,
+              compact: false,
+              presets: [require.resolve('babel-preset-react-app/dependencies')],
+              cacheDirectory: true,
+            },
+          },
           // The notation here is somewhat confusing.
           // "postcss" loader applies autoprefixer to our CSS.
           // "css" loader resolves paths in CSS and adds assets as dependencies.