BREAKING CHANGE: UPGRADE REACT NATIVE TO BABEL 7!

Summary:
BREAKING CHANGE
This change upgrades the React Native build pipeline from Babel 6 to Babel 7

If you use a `.babelrc` then you'll need to update it to Babel 7 (note that some plugins are no longer relevant, some plugins are automatically upgraded, and some will need some manual love).

Note that you may also need to upgrade your dev env, tests etc, to make sure they work with Babel 7.

Reviewed By: cpojer

Differential Revision: D7097279

fbshipit-source-id: 9fb204cae733174a1c155669b7c17ddb70f7aecc
This commit is contained in:
Peter van der Zee
2018-04-10 20:58:22 -07:00
committed by Facebook Github Bot
parent 80fc415cf1
commit ebd12fa09f
3 changed files with 234 additions and 113 deletions

View File

@@ -11,7 +11,7 @@
'use strict';
const babel = require('babel-core');
const {transformSync: babelTransformSync} = require('@babel/core');
/* $FlowFixMe(>=0.54.0 site=react_native_oss) This comment suppresses an error
* found when Flow v0.54 was deployed. To see the error delete this comment and
* run Flow. */
@@ -20,7 +20,7 @@ const babelRegisterOnly = require('metro/src/babelRegisterOnly');
* found when Flow v0.54 was deployed. To see the error delete this comment and
* run Flow. */
const createCacheKeyFunction = require('fbjs-scripts/jest/createCacheKeyFunction');
const generate = require('babel-generator').default;
const generate = require('@babel/generator').default;
const nodeFiles = RegExp([
'/local-cli/',
@@ -35,7 +35,7 @@ const transformer = require('metro/src/transformer.js');
module.exports = {
process(src/*: string*/, file/*: string*/) {
if (nodeFiles.test(file)) { // node specific transforms only
return babel.transform(
return babelTransformSync(
src,
Object.assign({filename: file}, nodeOptions)
).code;
@@ -54,6 +54,45 @@ module.exports = {
retainLines: true,
},
src,
plugins: [
[require('@babel/plugin-transform-block-scoping')],
// the flow strip types plugin must go BEFORE class properties!
// there'll be a test case that fails if you don't.
[require('@babel/plugin-transform-flow-strip-types')],
[
require('@babel/plugin-proposal-class-properties'),
// use `this.foo = bar` instead of `this.defineProperty('foo', ...)`
// (Makes the properties enumerable)
{loose: true},
],
[require('@babel/plugin-transform-computed-properties')],
[require('@babel/plugin-transform-destructuring')],
[require('@babel/plugin-transform-function-name')],
[require('@babel/plugin-transform-literals')],
[require('@babel/plugin-transform-parameters')],
[require('@babel/plugin-transform-shorthand-properties')],
[require('@babel/plugin-transform-react-jsx')],
[require('@babel/plugin-transform-regenerator')],
[require('@babel/plugin-transform-sticky-regex')],
[require('@babel/plugin-transform-unicode-regex')],
[
require('@babel/plugin-transform-modules-commonjs'),
{strict: false, allowTopLevelThis: true},
],
[require('@babel/plugin-transform-classes')],
[require('@babel/plugin-transform-arrow-functions')],
[require('@babel/plugin-transform-spread')],
[require('@babel/plugin-proposal-object-rest-spread')],
[
require('@babel/plugin-transform-template-literals'),
{loose: true}, // dont 'a'.concat('b'), just use 'a'+'b'
],
[require('@babel/plugin-transform-exponentiation-operator')],
[require('@babel/plugin-transform-object-assign')],
[require('@babel/plugin-transform-for-of'), {loose: true}],
[require('@babel/plugin-transform-react-display-name')],
[require('@babel/plugin-transform-react-jsx-source')],
],
});
return generate(ast, {
@@ -70,6 +109,6 @@ module.exports = {
getCacheKey: createCacheKeyFunction([
__filename,
require.resolve('metro/src/transformer.js'),
require.resolve('babel-core/package.json'),
require.resolve('@babel/core/package.json'),
]),
};