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

facebook · Jan 13, 2018 · b08b400 · b08b400
1 parent 6c233ea
commit b08b400
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 3 deletions.
diff --git a/packages/babel-preset-react-app/dependencies.js b/packages/babel-preset-react-app/dependencies.js
@@ -0,0 +1,57 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+module.exports = function(api, opts) {
+  if (!opts) {
+    opts = {};
+  }
+
+  // This is similar to how `env` works in Babel:
+  // https://babeljs.io/docs/usage/babelrc/#env-option
+  // We are not using `env` because it’s ignored in versions > babel-core@6.10.4:
+  // https://github.com/babel/babel/issues/4539
+  // https://github.com/facebookincubator/create-react-app/issues/720
+  // It’s also nice that we can enforce `NODE_ENV` being specified.
+  var env = process.env.BABEL_ENV || process.env.NODE_ENV;
+  var isEnvDevelopment = env === 'development';
+  var isEnvProduction = env === 'production';
+  var isEnvTest = env === 'test';
+  if (!isEnvDevelopment && !isEnvProduction && !isEnvTest) {
+    throw new Error(
+      'Using `babel-preset-react-app` requires that you specify `NODE_ENV` or ' +
+        '`BABEL_ENV` environment variables. Valid values are "development", ' +
+        '"test", and "production". Instead, received: ' +
+        JSON.stringify(env) +
+        '.'
+    );
+  }
+
+  return {
+    presets: [
+      isEnvTest && [
+        // ES features necessary for user's Node version
+        require('@babel/preset-env').default,
+        {
+          targets: {
+            node: 'current',
+          },
+          // Do not transform modules to CJS
+          modules: false,
+        },
+      ],
+      (isEnvProduction || isEnvDevelopment) && [
+        // Latest stable ECMAScript features
+        require('@babel/preset-env').default,
+        {
+          // Do not transform modules to CJS
+          modules: false,
+        },
+      ],
+    ].filter(Boolean),
+  };
+};
diff --git a/packages/babel-preset-react-app/package.json b/packages/babel-preset-react-app/package.json
@@ -8,7 +8,8 @@
     "url": "https://github.com/facebookincubator/create-react-app/issues"
   },
   "files": [
-    "index.js"
+    "index.js",
+    "dependencies.js"
   ],
   "dependencies": {
     "@babel/core": "7.0.0-beta.36",

diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/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/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/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.