web-dev-qa-db-ja.com

React babel 6からbabel 7へのネイティブアップグレード

既存の反応ネイティブプロジェクトを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 docを読んだ後）このアップグレードを行うために何をすべきか、実行するコマンド、依存関係に何を追加するべきか、devDependenciesに何をすべきかは、私にはあまり明確ではありません。

また、react-nativeプロジェクトのJSコードで何が起こっているのかについて、babel 6とbabel 7の違いはあまりわかりません。

Babel docまたはreact-native 0.57変更ログへのリンクだけで返信しないでください。

このアップグレードを行うには少なくともいくつかの基本的な手順と、babel 7に基づくRNプロジェクトのpackage.jsonの例が必要です。

react-nativebabeljs
12
Florin Dobre

短い答え：

run npx babel-upgrade

（その後、package.jsonを見て、変更点を確認できます）

ロングアンサー：

Babelおよびbabel-upgradeのドキュメントを読んだ後のRN 0.57.xの場合、私のプロジェクトのdevDependencies内にすべての古い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-upgradeを使用しました（npxは既にnpmバージョンに含まれています> = 5.2.0） npmをグローバルにインストールする必要がある古いnpxバージョン。

npxを使用すると、ローカルにインストールせずにbabel-upgradeを実行できます。

2）npx babel-upgrade（--write optionなし）を実行して、アップグレードがpackage.json depsにどのように影響するかを確認しました）

）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 depが必要ないことに気付きました。これは、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の場合：ポッドファイルにreact/react-native depsなしでIOSでビルドできました。これらを内部に追加/再追加しました- リンクされたフレームワークとライブラリセクション

6
Florin Dobre

babel-upgradeを使用します。

Babelの依存関係を自動的にアップグレードするには、babel-upgradeを使用してみてください。

グローバルにインストールしなくても、非常に使いやすいです。

クリーンな作業ディレクトリ（ステージングされていない変更なし）を用意し、次のコマンドを実行することをお勧めします。

npx babel-upgrade --write

これにより、package.jsonファイルと.babelrcファイルが正しいBabelバージョンとパッケージで更新されます。

--writeコマンドは、変更をディスクに保存するようにツールに指示するだけです。そのため、git diffで変更を確認できるように、作業ディレクトリをきれいにすることをお勧めします。 --writeを省略すると、コンソールに目的の変更が表示されるだけです。

詳細は https://github.com/babel/babel-upgrade で確認できます。

2
Joshua Pinter