Question

将现有的原生项目从babel 6升级到babel 7会采取什么步骤？

这些是旧的依赖项：

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

要执行此更新，必须遵循什么步骤？新的依赖项应如何显示？

对于我（在阅读babel文档之后）还不是很清楚，我应该做些什么来进行此升级，要运行的命令以及应在依赖项中添加什么以及在devDependencies中应添加什么。

对于我来说，不清楚babel 6和babel 7在本机项目中使用JS代码发生了什么区别。

请不要仅使用指向babel doc或本机0.57更改日志的链接来回复。

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

Answer 1

简短答案：

run npx babel-upgrade

（然后您可以在package.json中查看更改内容）

好答案：

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

"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版本> = 5.2.0中已经包含npm）如果您有较旧的npm版本，则必须全局安装npx。

npx使您可以运行babel-upgrade，而无需在本地安装。

2）我运行了npx babel-upgrade（没有--write option）来查看升级将如何影响我的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"，并将.babelrc的配置更改为：

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

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

现在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都可以构建并正常运行。

如果您发现此babel更新有更好的解决方案或改进，请添加评论或添加新答案，我将很乐意更新我的答案或接受新的更好的答案。

来源：

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 命令创建了一个新项目。

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

}

注意： 对于IOS：我能够在pod文件中没有任何react/react-native部门的情况下在IOS中构建它。我在链接的框架和库部分

中添加/重新添加了这些内容

Answer 2

使用`babel-upgrade`。

您可以尝试使用babel-upgrade来自动升级Babel依赖项。

即使不全局安装，它也非常易于使用。

我建议您拥有一个干净的工作目录（没有未进行的暂存更改），只需运行以下命令：

npx babel-upgrade --write

这将使用正确的Babel版本和软件包更新您的package.json和.babelrc文件。

--write命令只是告诉该工具将更改保存到磁盘。因此，我建议使用干净的工作目录，以便您可以使用git diff查看所做的更改。如果省略--write，它将仅在控制台中显示所需的更改。

您可以在https://github.com/babel/babel-upgrade上查看更多信息。

Answer 3

对于在 2021 年遇到此问题的任何人： npm install --save-dev @babel/core @babel/cli

反应从Babel 6到Babel 7的本机升级

3 个答案:

使用`babel-upgrade`。

反应从Babel 6到Babel 7的本机升级

3 个答案:

使用babel-upgrade。

使用`babel-upgrade`。