Create .babelrc file on eject

config/babel.dev.js

@@ -9,38 +9,66 @@
  */
 // @remove-on-eject-end
 
+
+// After eject
+module.exports = function () {
+  return {
+    // This is a feature of `babel-loader` for webpack (not Babel itself).
+    // It enables caching results in OS temporary directory for faster rebuilds.
+    cacheDirectory: true
+  };
+}
+
+// @remove-on-eject-begin
 var path = require('path');
+// Before eject
+module.exports = function (resolvePaths) {
+  return {
+    // Don't try to find .babelrc because we want to force this configuration.
+    babelrc: false,
+    // This is a feature of `babel-loader` for webpack (not Babel itself).
+    // It enables caching results in OS temporary directory for faster rebuilds.
+    cacheDirectory: true,
+    presets: [
+      // Latest stable ECMAScript features
+      'babel-preset-latest',
+      // JSX, Flow
+      'babel-preset-react'
+    ].map(function (preset) {
+      if (resolvePaths) {
+        return require.resolve(preset);
+      }
 
-module.exports = {
-  // Don't try to find .babelrc because we want to force this configuration.
-  babelrc: false,
-  // This is a feature of `babel-loader` for webpack (not Babel itself).
-  // It enables caching results in OS temporary directory for faster rebuilds.
-  cacheDirectory: true,
-  presets: [
-    // Latest stable ECMAScript features
-    require.resolve('babel-preset-latest'),
-    // JSX, Flow
-    require.resolve('babel-preset-react')
-  ],
-  plugins: [
-    // class { handleClick = () => { } }
-    require.resolve('babel-plugin-transform-class-properties'),
-    // { ...todo, completed: true }
-    require.resolve('babel-plugin-transform-object-rest-spread'),
-    // function* () { yield 42; yield 43; }
-    [require.resolve('babel-plugin-transform-regenerator'), {
-      // Async functions are converted to generators by babel-preset-latest
-      async: false
-    }],
-    // Polyfills the runtime needed for async/await and generators
-    [require.resolve('babel-plugin-transform-runtime'), {
-      helpers: false,
-      polyfill: false,
-      regenerator: true,
-      // Resolve the Babel runtime relative to the config.
-      // You can safely remove this after ejecting:
-      moduleName: path.dirname(require.resolve('babel-runtime/package'))
-    }]
-  ]
+      return preset;
+    }),
+    plugins: [
+      // class { handleClick = () => { } }
+      'babel-plugin-transform-class-properties',
+      // { ...todo, completed: true }
+      'babel-plugin-transform-object-rest-spread',
+      // function* () { yield 42; yield 43; }
+      ['babel-plugin-transform-regenerator', {
+        // Async functions are converted to generators by babel-preset-latest
+        async: false
+      }],
+      // Polyfills the runtime needed for async/await and generators
+      ['babel-plugin-transform-runtime', {
+        helpers: false,
+        polyfill: false,
+        regenerator: true,
+        // Resolve the Babel runtime relative to the config.
+        // You can safely remove this after ejecting:
+        moduleName: path.dirname(require.resolve('babel-runtime/package'))
+      }]
+    ].map(function (plugin) {
+      if (resolvePaths) {
+        return Array.isArray(plugin) ?
+          [require.resolve(plugin[0]), plugin[1]] :
+          require.resolve(plugin);
+      }
+
+      return plugin;
+    })
+  }
 };
+// @remove-on-eject-end

config/babel.prod.js

@@ -9,41 +9,67 @@
  */
 // @remove-on-eject-end
 
+
+// After eject
+// Config is empty as .babelrc now exists.
+// Export an empty object as webpack.config.prod.js expects to find one.
+module.exports = function () {
+  return {};
+};
+
+// @remove-on-eject-begin
 var path = require('path');
+// Before eject
+module.exports = function (resolvePaths) {
+  return {
+    // Don't try to find .babelrc because we want to force this configuration.
+    babelrc: false,
+    presets: [
+      // Latest stable ECMAScript features
+      'babel-preset-latest',
+      // JSX, Flow
+      'babel-preset-react'
+    ].map(function (preset) {
+      if (resolvePaths) {
+        return require.resolve(preset);
+      }
+
+      return preset;
+    }),
+    plugins: [
+      // class { handleClick = () => { } }
+      'babel-plugin-transform-class-properties',
+      // { ...todo, completed: true }
+      'babel-plugin-transform-object-rest-spread',
+      // function* () { yield 42; yield 43; }
+      ['babel-plugin-transform-regenerator', {
+        // Async functions are converted to generators by babel-preset-latest
+        async: false
+      }],
+      // Polyfills the runtime needed for async/await and generators
+      ['babel-plugin-transform-runtime', {
+        helpers: false,
+        polyfill: false,
+        regenerator: true,
+        // Resolve the Babel runtime relative to the config.
+        // You can safely remove this after ejecting:
+        moduleName: path.dirname(require.resolve('babel-runtime/package'))
+      }],
+      // Optimization: hoist JSX that never changes out of render()
+      // Disabled because of issues:
+      // * https://github.com/facebookincubator/create-react-app/issues/525
+      // * https://phabricator.babeljs.io/search/query/pCNlnC2xzwzx/
+      // TODO: Enable again when these issues are resolved.
+      // require.resolve('babel-plugin-transform-react-constant-elements')
+    ].map(function (plugin) {
+      if (resolvePaths) {
+        return Array.isArray(plugin) ?
+          [require.resolve(plugin[0]), plugin[1]] :
+          require.resolve(plugin);
+      }
 
-module.exports = {
-  // Don't try to find .babelrc because we want to force this configuration.
-  babelrc: false,
-  presets: [
-    // Latest stable ECMAScript features
-    require.resolve('babel-preset-latest'),
-    // JSX, Flow
-    require.resolve('babel-preset-react')
-  ],
-  plugins: [
-    // class { handleClick = () => { } }
-    require.resolve('babel-plugin-transform-class-properties'),
-    // { ...todo, completed: true }
-    require.resolve('babel-plugin-transform-object-rest-spread'),
-    // function* () { yield 42; yield 43; }
-    [require.resolve('babel-plugin-transform-regenerator'), {
-      // Async functions are converted to generators by babel-preset-latest
-      async: false
-    }],
-    // Polyfills the runtime needed for async/await and generators
-    [require.resolve('babel-plugin-transform-runtime'), {
-      helpers: false,
-      polyfill: false,
-      regenerator: true,
-      // Resolve the Babel runtime relative to the config.
-      // You can safely remove this after ejecting:
-      moduleName: path.dirname(require.resolve('babel-runtime/package'))
-    }],
-    // Optimization: hoist JSX that never changes out of render()
-    // Disabled because of issues:
-    // * https://github.com/facebookincubator/create-react-app/issues/525
-    // * https://phabricator.babeljs.io/search/query/pCNlnC2xzwzx/
-    // TODO: Enable again when these issues are resolved.
-    // require.resolve('babel-plugin-transform-react-constant-elements')
-  ]
+      return plugin;
+    })
+  };
 };
+// @remove-on-eject-end

config/webpack.config.dev.js

@@ -107,7 +107,7 @@ module.exports = {
         test: /\.(js|jsx)$/,
         include: paths.appSrc,
         loader: 'babel',
-        query: require('./babel.dev')
+        query: require('./babel.dev')(true)
       },
       // "postcss" loader applies autoprefixer to our CSS.
       // "css" loader resolves paths in CSS and adds assets as dependencies.

config/webpack.config.prod.js

@@ -102,7 +102,7 @@ module.exports = {
         test: /\.(js|jsx)$/,
         include: paths.appSrc,
         loader: 'babel',
-        query: require('./babel.prod')
+        query: require('./babel.prod')(true)
       },
       // The notation here is somewhat confusing.
       // "postcss" loader applies autoprefixer to our CSS.

scripts/eject.js

@@ -13,6 +13,8 @@ var path = require('path');
 var prompt = require('./utils/prompt');
 var rimrafSync = require('rimraf').sync;
 var spawnSync = require('cross-spawn').sync;
+var babelDevConfig = require('../config/babel.dev.js')(false);
+var babelProdConfig = require('../config/babel.prod.js')(false);
 
 prompt(
   'Are you sure you want to eject? This action is permanent.',
@@ -69,6 +71,25 @@ prompt(
   fs.mkdirSync(path.join(appPath, 'scripts'));
   fs.mkdirSync(path.join(appPath, 'scripts', 'utils'));
 
+  // Create .babelrc from dev and prod configs before dead code is removed
+  var babelrc = {
+    env: {
+      development: {
+        presets: babelDevConfig.presets,
+        plugins: babelDevConfig.plugins
+      },
+      production: {
+        presets: babelProdConfig.presets,
+        plugins: babelProdConfig.plugins
+      }
+    }
+  };
+
+  fs.writeFileSync(
+    path.join(appPath, 'config', '.babelrc'),
+    JSON.stringify(babelrc, null, 2)
+  );
+
   files.forEach(function(file) {
     console.log('Copying ' + file + ' to ' + appPath);
     var content = fs
@@ -115,6 +136,11 @@ prompt(
     extends: './config/eslint.js',
   };
 
+  // Explicitly specify .babelrc config path
+  appPackage.babel = {
+    extends: './config/.babelrc'
+  };
+
   console.log('Writing package.json');
   fs.writeFileSync(
     path.join(appPath, 'package.json'),