Extract Babel configuration to babel-preset-react-app (#701)

facebook · Sep 22, 2016 · 5b85a36 · 5b85a36
1 parent d3ecd6d
commit 5b85a36
Show file tree

Hide file tree

Showing 6 changed files with 99 additions and 65 deletions.
diff --git a/packages/babel-preset-react-app/README.md b/packages/babel-preset-react-app/README.md
@@ -0,0 +1,21 @@
+# babel-preset-react-app
+
+This package includes the Babel preset used by [Create React App](https://github.com/facebookincubator/create-react-app).
+
+## Usage in Create React App Projects
+
+The easiest way to use this configuration is with [Create React App](https://github.com/facebookincubator/create-react-app), which includes it by default. **You don’t need to install it separately in Create React App projects.**
+
+## Usage Outside of Create React App
+
+If you want to use this ESLint configuration in a project not built with Create React App, you can install it with following steps.
+
+First, [install Babel](https://babeljs.io/docs/setup/).
+
+Then create a file named `.babelrc` with following contents in the root folder of your project:
+
+  ```js
+  {
+    "presets": ["react-app"]
+  }
+  ```
diff --git a/packages/babel-preset-react-app/index.js b/packages/babel-preset-react-app/index.js
@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) 2015-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.
+ */
+'use strict';
+
+var path = require('path');
+
+module.exports = {
+  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.
+      moduleName: path.dirname(require.resolve('babel-runtime/package'))
+    }]
+  ],
+  env: {
+    production: {
+      plugins: [
+        // 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/
+        // * https://github.com/babel/babel/issues/4516
+        // TODO: Enable again when these issues are resolved.
+        // require.resolve('babel-plugin-transform-react-constant-elements')
+      ]
+    }
+  }
+};
diff --git a/packages/babel-preset-react-app/package.json b/packages/babel-preset-react-app/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "babel-preset-react-app",
+  "version": "0.0.1",
+  "description": "Babel preset used by Create React App",
+  "repository": "facebookincubator/create-react-app",
+  "license": "BSD-3-Clause",
+  "bugs": {
+    "url": "https://github.com/facebookincubator/create-react-app/issues"
+  },
+  "files": [
+    "index.js"
+  ],
+  "dependencies": {
+    "babel-plugin-transform-class-properties": "6.11.5",
+    "babel-plugin-transform-object-rest-spread": "6.8.0",
+    "babel-plugin-transform-react-constant-elements": "6.9.1",
+    "babel-plugin-transform-regenerator": "6.14.0",
+    "babel-plugin-transform-runtime": "6.15.0",
+    "babel-preset-latest": "6.14.0",
+    "babel-preset-react": "6.11.1",
+    "babel-runtime": "6.11.6"
+  }
+}
diff --git a/packages/react-scripts/config/babel.dev.js b/packages/react-scripts/config/babel.dev.js
@@ -9,7 +9,6 @@
  */
 // @remove-on-eject-end
 
-var path = require('path');
 var findCacheDir = require('find-cache-dir');
 
 module.exports = {
@@ -23,29 +22,6 @@ module.exports = {
     name: 'react-scripts'
   }),
   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'))
-    }]
+    require.resolve('babel-preset-react-app')
   ]
 };
diff --git a/packages/react-scripts/config/babel.prod.js b/packages/react-scripts/config/babel.prod.js
@@ -9,41 +9,10 @@
  */
 // @remove-on-eject-end
 
-var path = require('path');
-
 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')
+    require.resolve('babel-preset-react-app')
   ]
 };
diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json
@@ -26,14 +26,7 @@
     "babel-eslint": "6.1.2",
     "babel-jest": "15.0.0",
     "babel-loader": "6.2.5",
-    "babel-plugin-transform-class-properties": "6.11.5",
-    "babel-plugin-transform-object-rest-spread": "6.8.0",
-    "babel-plugin-transform-react-constant-elements": "6.9.1",
-    "babel-plugin-transform-regenerator": "6.14.0",
-    "babel-plugin-transform-runtime": "6.15.0",
-    "babel-preset-latest": "6.14.0",
-    "babel-preset-react": "6.11.1",
-    "babel-runtime": "6.11.6",
+    "babel-preset-react-app": "0.0.1",
     "case-sensitive-paths-webpack-plugin": "1.1.4",
     "chalk": "1.1.3",
     "connect-history-api-fallback": "1.3.0",