Reactnative React 从 babel 6 到 babel 7 的原生升级

Short answer:

run npx babel-upgrade

(然后你可以查看package.json中的内容，以判断发生了什么变化)

Long answer:

对于RN 0.57.x在阅读了babel和babel升级文档后，我意识到在我的项目的devdependences中包含所有旧的babel依赖项就足够了:

"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) 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，而无需在本地安装它.

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

3)我跑了npx babel-upgrade --write

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

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

如RN变更日志(log)说明中所述.

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

  "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上都可以构建和运行.

如果你发现了一个更好的解决方案或巴别塔更新的改进，请添加 comments 或添加一个新的答案，我将很高兴更新我的答案或接受一个新的更好的.

资料来源:

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

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

对于RN 0.58.6个我注意到我不需要那么多巴别塔德普.我注意到这是在用react-native init命令创建一个新项目.

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

{
  "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", 
   // ...
  }

}

NOTE: