React native 从babel 6到babel 7的React本机升级

对于现有的react原生项目，从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文档之后）不太清楚我应该做什么来进行升级，运行命令，应该在依赖项中添加什么，在devdependences中添加什么

对于我来说，关于react原生项目中JS代码的情况，Babel6和Babel7之间的区别也不是很清楚

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

---

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

简短回答：

运行npx babel升级

（然后，您可以查看

package.json

中的内容以检查更改的内容）

长答案：

对于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）我使用了

npx

和

babel升级

（

npx

已经包含在

npm

版本>=5.2.0中） 如果您有较旧的

npm

版本，则必须全局安装

npx

npx

允许您运行

babel升级

，而无需在本地安装

2）我运行了

npx-babel升级

（没有

--write选项

），查看升级将如何影响我的package.json-deps）

3）我运行了

npx-babel升级——编写

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变更日志说明中所述

现在
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",
    .....

}

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

}

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

如果您找到一个更好的解决方案或改进，请添加评论或添加一个新的答案，我将很高兴更新我的答案或接受一个新的更好的

资料来源：



对于RN 0.58.6我注意到我不需要那么多巴别塔dep。我注意到使用react native init命令创建一个新项目

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

}

{
  "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
dep。我在链接的框架和库中添加了/重新添加了它们部分
使用
巴别塔升级
。
您可以尝试使用
babel upgrade
自动升级您的babel依赖项

它非常易于使用，即使不在全球范围内安装

我建议使用一个干净的工作目录（没有未分级的更改），只需运行以下命令：

npx babel-upgrade --write

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

--write
命令只是告诉工具将更改保存到磁盘。这就是为什么我建议使用一个干净的工作目录，这样您就可以使用
git diff
查看更改。如果省略
--write
，它只会在控制台中显示所需的更改

有关2021年出现此问题的任何人的详细信息，请访问。
：
npm安装--保存dev@babel/core@babel/cli
为什么有这么多babel依赖项？什么是
devDependency
和
dependency
“为什么有这么多巴贝尔依赖项？”因为巴贝尔有很多依赖项：P“devDependency”-只在开发时使用的东西“依赖项”-在应用程序运行时使用的东西我在下面的回答中说了同样的话：）@floridobre:）是的，我想我发现了，但对你的回答有点迷糊了。我想为登陆这里的其他人发布一些更简洁的东西。我希望你没有生气不用担心，我重新编辑了我的答案，但我认为社区最好也有你们这样的答案。它们是一个提醒，让事情尽可能简单，并可以为不需要细节的用户节省时间：）@FlorinDobre绝对。但我也喜欢保留你最初的答案，以备后世和历史之需+1: