From 5738078c66bbd6c6227b6315adc155a61dbb54dc Mon Sep 17 00:00:00 2001 From: Ville Immonen Date: Thu, 22 Sep 2016 22:17:54 +0300 Subject: [PATCH] Extract Babel configuration to babel-preset-react-app (#701) --- packages/babel-preset-react-app/README.md | 21 ++++++++ packages/babel-preset-react-app/index.js | 52 ++++++++++++++++++++ packages/babel-preset-react-app/package.json | 23 +++++++++ packages/react-scripts/config/babel.dev.js | 26 +--------- packages/react-scripts/config/babel.prod.js | 33 +------------ packages/react-scripts/package.json | 9 +--- 6 files changed, 99 insertions(+), 65 deletions(-) create mode 100644 packages/babel-preset-react-app/README.md create mode 100644 packages/babel-preset-react-app/index.js create mode 100644 packages/babel-preset-react-app/package.json diff --git a/packages/babel-preset-react-app/README.md b/packages/babel-preset-react-app/README.md new file mode 100644 index 00000000000..801d189e1a1 --- /dev/null +++ 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 new file mode 100644 index 00000000000..ec29dc40f2e --- /dev/null +++ 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 new file mode 100644 index 00000000000..8bb6560446d --- /dev/null +++ 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 index 0113b847824..f3ccd89ed40 100644 --- 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 index f53094ababd..8ed8e1e3c7d 100644 --- 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 index ad23233266b..00be129a0c0 100644 --- 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",