diff --git a/packages/babel-preset-react-app/dependencies.js b/packages/babel-preset-react-app/dependencies.js new file mode 100644 index 00000000000..ccb798cc2be --- /dev/null +++ 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 index c094838633b..344f37b938d 100644 --- 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 index 2c6b364fe55..74651384349 100644 --- 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