From c5dd703088edd0cdfc030c37584bf2b63aedb1a6 Mon Sep 17 00:00:00 2001 From: Adam Miskiewicz Date: Sat, 9 Jan 2016 00:25:30 -0500 Subject: [PATCH] Use "babel-preset-react-native" Rather than specifying Babel plugins in the `.babelrc` packaged with react-native, leverage a Babel preset to define the plugins (https://github.com/exponentjs/babel-preset-react-native). This allows for a much better user experience for those who want (or need) to override options in their project's `.babelrc`. Prior to this PR, if a user wanted to use a custom babel-plugin (or a custom set of babel plugins), they'd have either 1) manually override the `.babelrc` in the react-packager directory (or fork RN), or 2) specify a custom transformer to use when running the packager that loaded their own `.babelrc`. Note - the custom transformer was necessary because without it, RN's `.babelrc` options would supersede the options defined in the project's `.babelrc`...potentially causing issues with plugin ordering. This PR makes the transformer check for the existence of a project-level `.babelrc`, and if it it's there, it _doesn't_ use the react-native `.babelrc`. This prevents any oddities with Babel plugin ordering, and leaves that up to the RN user. The RN user would then just include a `.babelrc` file in their project that looks like: ``` { "presets": ["react-native"] } ``` They can then add whatever other presets or plugins that they'd like (such as the Babel Relay Plugin or a decorators plugin, for example). --- package.json | 35 +++++------------------- packager/babelRegisterOnly.js | 2 +- packager/react-packager/.babelrc | 30 --------------------- packager/react-packager/.babelrc.json | 4 +++ packager/transformer.js | 39 ++++++++++++++++++++------- 5 files changed, 40 insertions(+), 70 deletions(-) delete mode 100644 packager/react-packager/.babelrc create mode 100644 packager/react-packager/.babelrc.json diff --git a/package.json b/package.json index bdd4d7d038976c..61f4f00c34f0bc 100644 --- a/package.json +++ b/package.json @@ -108,35 +108,12 @@ "dependencies": { "absolute-path": "^0.0.0", "art": "^0.10.0", - "babel-core": "^6.1.20", - "babel-plugin-external-helpers-2": "^6.1.4", - "babel-plugin-syntax-async-functions": "^6.0.14", - "babel-plugin-syntax-class-properties": "^6.0.14", - "babel-plugin-syntax-flow": "^6.0.14", - "babel-plugin-syntax-jsx": "^6.0.14", - "babel-plugin-syntax-trailing-function-commas": "^6.0.14", - "babel-plugin-transform-class-properties": "^6.0.14", - "babel-plugin-transform-es2015-arrow-functions": "^6.0.14", - "babel-plugin-transform-es2015-block-scoping": "^6.0.18", - "babel-plugin-transform-es2015-classes": "^6.1.2", - "babel-plugin-transform-es2015-computed-properties": "^6.0.14", - "babel-plugin-transform-es2015-constants": "^6.0.15", - "babel-plugin-transform-es2015-destructuring": "^6.0.18", - "babel-plugin-transform-es2015-for-of": "^6.0.14", - "babel-plugin-transform-es2015-modules-commonjs": "^6.1.3", - "babel-plugin-transform-es2015-parameters": "^6.0.18", - "babel-plugin-transform-es2015-shorthand-properties": "^6.0.14", - "babel-plugin-transform-es2015-spread": "^6.0.14", - "babel-plugin-transform-es2015-template-literals": "^6.0.14", - "babel-plugin-transform-flow-strip-types": "^6.0.14", - "babel-plugin-transform-object-assign": "^6.0.14", - "babel-plugin-transform-object-rest-spread": "^6.0.14", - "babel-plugin-transform-react-display-name": "^6.0.14", - "babel-plugin-transform-react-jsx": "^6.0.18", - "babel-plugin-transform-regenerator": "^6.0.18", - "babel-polyfill": "^6.0.16", - "babel-types": "^6.1.2", - "babylon": "^6.1.2", + "babel-core": "~6.4.0", + "babel-plugin-external-helpers": "~6.4.0", + "babel-preset-react-native": "^1.0.0", + "babel-polyfill": "~6.3.14", + "babel-types": "~6.4.1", + "babylon": "~6.4.2", "base64-js": "^0.0.8", "bser": "^1.0.2", "chalk": "^1.1.1", diff --git a/packager/babelRegisterOnly.js b/packager/babelRegisterOnly.js index bf32861055ef3b..e458fa247060d3 100644 --- a/packager/babelRegisterOnly.js +++ b/packager/babelRegisterOnly.js @@ -16,7 +16,7 @@ var path = require('path'); var _only = []; function readBabelRC() { - var rcpath = path.join(__dirname, 'react-packager', '.babelrc'); + var rcpath = path.join(__dirname, 'react-packager', '.babelrc.json'); var source = fs.readFileSync(rcpath).toString(); return JSON.parse(source); } diff --git a/packager/react-packager/.babelrc b/packager/react-packager/.babelrc deleted file mode 100644 index e1c61b11f7df4d..00000000000000 --- a/packager/react-packager/.babelrc +++ /dev/null @@ -1,30 +0,0 @@ -{ - "retainLines": true, - "compact": true, - "comments": false, - "plugins": [ - "syntax-async-functions", - "syntax-class-properties", - "syntax-trailing-function-commas", - "transform-class-properties", - "transform-es2015-arrow-functions", - "transform-es2015-block-scoping", - "transform-es2015-classes", - "transform-es2015-computed-properties", - "transform-es2015-constants", - "transform-es2015-destructuring", - ["transform-es2015-modules-commonjs", {"strict": false, "allowTopLevelThis": true}], - "transform-es2015-parameters", - "transform-es2015-shorthand-properties", - "transform-es2015-spread", - "transform-es2015-template-literals", - "transform-flow-strip-types", - "transform-object-assign", - "transform-object-rest-spread", - "transform-react-display-name", - "transform-react-jsx", - "transform-regenerator", - "transform-es2015-for-of" - ], - "sourceMaps": false -} diff --git a/packager/react-packager/.babelrc.json b/packager/react-packager/.babelrc.json new file mode 100644 index 00000000000000..bbc20ea981dbd1 --- /dev/null +++ b/packager/react-packager/.babelrc.json @@ -0,0 +1,4 @@ +{ + "presets": [ "react-native" ], + "plugins": [] +} diff --git a/packager/transformer.js b/packager/transformer.js index df6009bd7f81b5..70565b287a5ce1 100644 --- a/packager/transformer.js +++ b/packager/transformer.js @@ -16,17 +16,25 @@ const inlineRequires = require('fbjs-scripts/babel-6/inline-requires'); const json5 = require('json5'); const path = require('path'); const ReactPackager = require('./react-packager'); -const resolvePlugins = require('./react-packager/src/JSTransformer/resolvePlugins'); -const babelRC = - json5.parse( - fs.readFileSync( - path.resolve(__dirname, 'react-packager', '.babelrc'))); -function transform(src, filename, options) { - options = options || {}; +const projectBabelRCPath = path.resolve(__dirname, '..', '..', '..', '.babelrc'); + +let babelRC = { plugins: [] }; - const extraPlugins = ['external-helpers-2']; +// If a babelrc exists in the project, +// don't use the one provided with react-native. +if (!fs.existsSync(projectBabelRCPath)) { + babelRC = json5.parse( + fs.readFileSync( + path.resolve(__dirname, 'react-packager', '.babelrc.json'))); +} + +/** + * Given a filename and options, build a Babel + * config object with the appropriate plugins. + */ +function buildBabelConfig(filename, options) { const extraConfig = { filename, sourceFileName: filename, @@ -34,12 +42,23 @@ function transform(src, filename, options) { const config = Object.assign({}, babelRC, extraConfig); + // Add extra plugins + const extraPlugins = [require('babel-plugin-external-helpers')]; + if (options.inlineRequires) { extraPlugins.push(inlineRequires); } - config.plugins = resolvePlugins(extraPlugins.concat(config.plugins)); - const result = babel.transform(src, Object.assign({}, babelRC, config)); + config.plugins = extraPlugins.concat(config.plugins); + + return Object.assign({}, babelRC, extraConfig); +} + +function transform(src, filename, options) { + options = options || {}; + + const babelConfig = buildBabelConfig(filename, options); + const result = babel.transform(src, babelConfig); return { code: result.code,