Eject .babelrc instead of separate configs (#705)

Fixes #410, #674

Author: gaearon

packages/react-scripts/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["react-app"]
+}

packages/react-scripts/config/babel.dev.js

@@ -1,14 +1,13 @@
-// @remove-on-eject-begin
 /**
  * Copyright (c) 2014-present, Facebook, Inc. All rights reserved.
  *
  * This source code is licensed under the BSD-style license found in the
  * LICENSE file in the root directory of this source tree. An additional grant
  * of patent rights can be found in the PATENTS file in the same directory.
  */
-// @remove-on-eject-end
 
-const babelDev = require('../babel.dev');
 const babelJest = require('babel-jest');
 
-module.exports = babelJest.createTransformer(babelDev);
+module.exports = babelJest.createTransformer({
+  presets: [require.resolve('babel-preset-react-app')]
+});

packages/react-scripts/config/babel.prod.js

@@ -12,6 +12,7 @@
 var path = require('path');
 var autoprefixer = require('autoprefixer');
 var webpack = require('webpack');
+var findCacheDir = require('find-cache-dir');
 var HtmlWebpackPlugin = require('html-webpack-plugin');
 var CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
 var InterpolateHtmlPlugin = require('../scripts/utils/InterpolateHtmlPlugin');
@@ -118,7 +119,19 @@ module.exports = {
         test: /\.(js|jsx)$/,
         include: paths.appSrc,
         loader: 'babel',
-        query: require('./babel.dev')
+        query: {
+          // @remove-on-eject-begin
+          babelrc: false,
+          presets: [require.resolve('babel-preset-react-app')],
+          // @remove-on-eject-end
+          // This is a feature of `babel-loader` for webpack (not Babel itself).
+          // It enables caching results in ./node_modules/.cache/react-scripts/
+          // directory for faster rebuilds. We use findCacheDir() because of:
+          // https://github.com/facebookincubator/create-react-app/issues/483
+          cacheDirectory: findCacheDir({
+            name: 'react-scripts'
+          })
+        }
       },
       // "postcss" loader applies autoprefixer to our CSS.
       // "css" loader resolves paths in CSS and adds assets as dependencies.

packages/react-scripts/config/jest/transform.js

@@ -119,7 +119,12 @@ module.exports = {
         test: /\.(js|jsx)$/,
         include: paths.appSrc,
         loader: 'babel',
-        query: require('./babel.prod')
+        // @remove-on-eject-begin
+        query: {
+          babelrc: false,
+          presets: [require.resolve('babel-preset-react-app')],
+        },
+        // @remove-on-eject-end
       },
       // The notation here is somewhat confusing.
       // "postcss" loader applies autoprefixer to our CSS.

packages/react-scripts/config/webpack.config.dev.js

@@ -11,6 +11,7 @@
     "url": "https://github.com/facebookincubator/create-react-app/issues"
   },
   "files": [
+    ".babelrc",
     ".eslintrc",
     "bin",
     "config",

packages/react-scripts/config/webpack.config.prod.js

@@ -29,9 +29,8 @@ prompt(
   var ownPath = path.join(__dirname, '..');
   var appPath = path.join(ownPath, '..', '..');
   var files = [
+    '.babelrc',
     '.eslintrc',
-    path.join('config', 'babel.dev.js'),
-    path.join('config', 'babel.prod.js'),
     path.join('config', 'flow', 'css.js.flow'),
     path.join('config', 'flow', 'file.js.flow'),
     path.join('config', 'paths.js'),
@@ -40,7 +39,6 @@ prompt(
     path.join('config', 'webpack.config.prod.js'),
     path.join('config', 'jest', 'CSSStub.js'),
     path.join('config', 'jest', 'FileStub.js'),
-    path.join('config', 'jest', 'transform.js'),
     path.join('scripts', 'build.js'),
     path.join('scripts', 'start.js'),
     path.join('scripts', 'utils', 'checkRequiredFiles.js'),
@@ -109,7 +107,9 @@ prompt(
 
   // Add Jest config
   appPackage.jest = createJestConfig(
-    filePath => path.join('<rootDir>', filePath)
+    filePath => path.join('<rootDir>', filePath),
+    null,
+    true
   );
 
   console.log('Writing package.json');

packages/react-scripts/package.json

@@ -24,7 +24,8 @@ if (!process.env.CI) {
 
 argv.push('--config', JSON.stringify(createJestConfig(
   relativePath => path.resolve(__dirname, '..', relativePath),
-  path.resolve(paths.appSrc, '..')
+  path.resolve(paths.appSrc, '..'),
+  false
 )));
 
 jest.run(argv);

packages/react-scripts/scripts/eject.js

@@ -12,7 +12,7 @@
 const pathExists = require('path-exists');
 const paths = require('../../config/paths');
 
-module.exports = (resolve, rootDir) => {
+module.exports = (resolve, rootDir, isEjecting) => {
   const setupFiles = [resolve('config/polyfills.js')];
   if (pathExists.sync(paths.testsSetup)) {
     // Use this instead of `paths.testsSetup` to avoid putting
@@ -26,7 +26,6 @@ module.exports = (resolve, rootDir) => {
       '^.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': resolve('config/jest/FileStub.js'),
       '^.+\\.css$': resolve('config/jest/CSSStub.js')
     },
-    scriptPreprocessor: resolve('config/jest/transform.js'),
     setupFiles: setupFiles,
     testPathIgnorePatterns: ['<rootDir>/(build|docs|node_modules)/'],
     testEnvironment: 'node',
@@ -35,5 +34,10 @@ module.exports = (resolve, rootDir) => {
   if (rootDir) {
     config.rootDir = rootDir;
   }
+  if (!isEjecting) {
+    // This is unnecessary after ejecting because Jest
+    // will just use .babelrc in the project folder.
+    config.scriptPreprocessor = resolve('config/jest/transform.js');
+  }
   return config;
 };