React 原生从 babel 6 升级到 babel 7 [英] React native upgrade from babel 6 to babel 7

问题描述

将现有的 react-native 项目从 babel 6 升级到 babel 7 的步骤是什么?

What would be the steps to upgrade from babel 6 to babel 7 an existing react-native project?

这些是旧的依赖项:

 "dependencies": {
    .........
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-latest": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-register": "^6.24.1",
    "prop-types": "^15.5.10",
    "react": "16.3.1",
    "react-native": "0.55.4",
    "react-redux": "5.0.7",
    "redux": "^4.0.0",
    "redux-actions": "^2.6.1",
    "redux-mock-store": "^1.5.1",
    "redux-persist": "^5.10.0",
    "redux-thunk": "^2.1.0",
  },
  "devDependencies": {
    "babel-eslint": "^8.2.2",
    "babel-plugin-syntax-object-rest-spread": "^6.13.0",
    "babel-plugin-transform-object-rest-spread": "^6.23.0",
    "babel-preset-react-native": "^4.0.0",
    "babel-preset-react-native-stage-0": "^1.0.1",
    "eslint": "^4.18.1",
    "eslint-config-airbnb": "^17.0.0",
    "eslint-plugin-flowtype": "^2.46.1",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jsx-a11y": "6.1.1",
    "eslint-plugin-react": "^7.4.0",
    "gulp": "^3.9.0",
    "gulp-eslint": "4.0.2",
    "gulp-mocha": "6.0.0",
    "jest": "^23.5.0",
    .....
  },

要进行此更新，您必须遵循哪些步骤?新的依赖项应该是什么样的?

What steps do you have to follow to make this update? How should the new dependencies looks like?

我不太清楚(在阅读了 babel 文档之后)我应该怎么做才能进行升级、要运行的命令以及应该在依赖项中添加什么以及在 devDependencies 中添加什么.

It is not very clear for me (after reading the babel doc) what I should do to make this upgrade, commands to run and what should be added in dependencies and what in devDependencies.

此外，我也不太清楚 babel 6 和 babel 7 之间在 react-native 项目中的 JS 代码发生了什么区别.

Also it is not very clear for me what is the difference between babel 6 and babel 7 regarding what is happening with the JS code in a react-native project.

请不要只回复 babel doc 或 react-native 0.57 更改日志的链接.

Please don't respond with just links to babel doc or to react-native 0.57 change log.

我至少需要一些基本步骤来进行此升级，以及基于 babel 7 的 RN 项目的 package.json 示例.

I would need at least some basic steps to do this upgrade and an example of a package.json of a RN project based on babel 7.

推荐答案

简短回答:

运行 npx babel-upgrade

(然后你可以查看package.json 看看有什么变化)

(then you can take a look in package.json to check what changed)

长答案:

对于 RN 0.57.x，在阅读了 babel 和 babel-upgrade 文档后，我意识到在我的项目的 devDependencies 中拥有所有旧的 babel 依赖项就足够了:

For RN 0.57.x after reading the babel and babel-upgrade docs I realized it was enough to have all the old babel dependencies inside devDependencies for my project:

"dependencies": {
    .........
    "react": "16.3.1",
    "react-native": "0.55.4",
 },

"devDependencies": {
   "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-latest": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-register": "^6.24.1",
    "react-native": "0.55.4",
    "babel-eslint": "^8.2.2",
    "babel-plugin-syntax-object-rest-spread": "^6.13.0",
    "babel-plugin-transform-object-rest-spread": "^6.23.0",
    "babel-preset-react-native": "^4.0.0",
    "babel-preset-react-native-stage-0": "^1.0.1",        
    .....
  },

1) 我使用了 npx 和 babel-upgrade(npx 已经包含在 npm 版本 >= 5.2.0)如果您有旧的 npm 版本，则必须全局安装 npx.

1) I used npx and babel-upgrade (npx is already included in npm versions >= 5.2.0) If you have older npm versions you have to install npx globally.

npx 让您无需在本地安装即可运行 babel-upgrade.

npx lets you run babel-upgrade without installing it locally.

2) 我运行了 npx babel-upgrade(没有 --write 选项)来查看升级将如何影响我的包.json deps)

2) I ran npx babel-upgrade ( without the --write option) to see how the upgrade will affect my package.json deps)

3) 我运行了 npx babel-upgrade --write

4) 我将 RN 版本设置为 0.57.1​​ 并将 babel-preset 依赖从 "babel-preset-react-native": "^5" 更改为 "metro-react-native-babel-preset": "^0.45.0",and .babelrc 配置为:

4) I set RN version to 0.57.1 and changed the babel-preset dependency from "babel-preset-react-native": "^5", to "metro-react-native-babel-preset": "^0.45.0",and .babelrc configuration to:

{
    "presets": ["module:metro-react-native-babel-preset"]
}

如 RN 更改日志说明中所述.

as written in the RN change log instructions.

现在 package.json 看起来像这样:

Now package.json looks like this:

  "dependencies": {
    "react": "16.5.0",
    "react-native": "0.57.1",
    .......
  }

  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/plugin-proposal-class-properties": "^7.0.0",
    "@babel/plugin-proposal-decorators": "^7.0.0",
    "@babel/plugin-proposal-do-expressions": "^7.0.0",
    "@babel/plugin-proposal-export-default-from": "^7.0.0",
    "@babel/plugin-proposal-export-namespace-from": "^7.0.0",
    "@babel/plugin-proposal-function-bind": "^7.0.0",
    "@babel/plugin-proposal-function-sent": "^7.0.0",
    "@babel/plugin-proposal-json-strings": "^7.0.0",
    "@babel/plugin-proposal-logical-assignment-operators": "^7.0.0",
    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.0.0",
    "@babel/plugin-proposal-numeric-separator": "^7.0.0",
    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
    "@babel/plugin-proposal-optional-chaining": "^7.0.0",
    "@babel/plugin-proposal-pipeline-operator": "^7.0.0",
    "@babel/plugin-proposal-throw-expressions": "^7.0.0",
    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
    "@babel/plugin-syntax-import-meta": "^7.0.0",
    "@babel/plugin-syntax-object-rest-spread": "^7.0.0",
    "@babel/plugin-transform-runtime": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-flow": "^7.0.0",
    "@babel/register": "^7.0.0",
    "babel-core": "^7.0.0-bridge.0",
    "babel-preset-react-native-stage-0": "^1.0.1",
    .....

}

我不确定是否需要 gradle-upgrade 添加的所有新依赖项，但该项目在 android 和 ios 上都可以构建和运行.

I am not sure if all the new dependencies added by gradle-upgrade are needed but the project builds and runs ok for both android and ios.

如果您找到了此 babel 更新的更好解决方案或改进，请添加评论或添加新答案，我很乐意更新我的答案或接受更好的新答案.

If you find a better solution or improvements for this babel update please add a comment or add a new answer, I will be happy to update my answer or accept a new better one.

来源:

https://github.com/react-native-community/react-native-releases/blob/master/CHANGELOG.md#057

https://github.com/babel/babel-upgrade

对于RN 0.58.6，我注意到我不需要那么多的 babel deps.我注意到这使用 react-native init 命令创建了一个新项目.

For RN 0.58.6 I noticed I do not need so many babel deps. I noticed this creating a new project with a react-native init command.

我的 package.json 文件现在看起来像这样:

My package.json file looks now like this:

{
  "dependencies": {
    "react": "16.6.3",
    "react-native": "0.58.6",
    // ....

  },
  "devDependencies": {
    "@babel/core": "^7.0.0-0",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^10.0.1",
    "babel-jest": "24.1.0",
    "jest": "24.1.0",
    "metro-react-native-babel-preset": "0.53.0",
    "react-test-renderer": "16.6.3",
    // .... 

  },
  "jest": {
    "preset": "react-native", 
   // ...
  }

}

注意:对于 IOS:我能够在 IOS 中构建它，而无需在 pod 文件中使用任何 react/react-native deps.我在链接的框架和库部分

NOTE: For IOS: I was able to build it in IOS without any react/react-native deps in pod file. I added/re-added those inside Linked Frameworks and Libraries section

这篇关于React 原生从 babel 6 升级到 babel 7的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！