Eject .babelrc instead of separate configs

packages/react-scripts/.babelrc

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

packages/react-scripts/config/jest/transform.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/webpack.config.dev.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/webpack.config.prod.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/package.json

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

packages/react-scripts/scripts/eject.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'),
@@ -41,7 +40,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'),
@@ -110,7 +108,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/scripts/test.js

@@ -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/utils/createJestConfig.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;
 };