web-dev-qa-db-ja.com

babel 7にアップグレードする方法

Webpackとbabelをそれぞれ4、7にアップグレードしようとしましたが、動作しませんでした。また、 公式ドキュメント はアップグレードにはあまり役立ちません

次の問題が発生しています

コンパイラエラー：モジュール '@ babel/core' @ multi mainが見つかりません

私が使用している依存関係：

"babel-core": "^6.26.3",
"babel-eslint": "^9.0.0",
"babel-loader": "^8.0.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"webpack": "^4.15.0",
"webpack-cli": "^3.0.8",
"webpack-dev-server": "^3.1.4"

詳細が必要な場合はお知らせください。

reactjsbabeljsbabelwebpack-4babel-loader
7
Hemadri Dasari

Babelは、モジュールの名前babel-coreを @ babel/core に変更しました。 npm install @babel/coreを実行するだけです。これにより、Babelコアの最新バージョンがインストールされます。

Babelのほとんどのパッケージは、@babel/PACKAGE_NAMEというパターンに従うように名前が変更されました。したがって、アップグレードする場合は、パッケージ名をパターンに従って変更し、npm installを実行します。

Babel 7にアップグレードするには、これを使用できます 移行ガイド 。

8
illiteratewriter

babel-upgrade を使用します

テスト済み[email protected]、[email protected]および[email protected]

次のスクリプトを使用できます。 （ノード5以降のnpxのみ）

npx babel-upgrade --write

--writeフラグは、package.jsonおよび.babelrcに更新を書き込みます。

package.jsonに次の変更を加えることになります。

"devDependencies": {
    "@babel/core": "^7.4.0",
    "@babel/plugin-proposal-class-properties": "^7.0.0",
    "@babel/plugin-proposal-json-strings": "^7.0.0",
    "@babel/plugin-proposal-private-methods": "^7.4.0",
    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
    "@babel/plugin-syntax-import-meta": "^7.0.0"
}

。babelrc

{
  "plugins": [
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-syntax-import-meta",
    [
      "@babel/plugin-proposal-class-properties"
    ],
    "@babel/plugin-proposal-json-strings",
    [
      "@babel/plugin-proposal-private-methods"
    ]
  ]
}

上記のプラグインのうち、必要な@babel/plugin-proposal-class-properties @babel/plugin-proposal-private-methods実装することを選択した場合、プライベートプロパティを正しく機能させる。

Eslintを使用している場合、。eslintrcファイルでパーサーをbabel-eslintのように設定することを忘れないでください：

{
    "parser": "babel-eslint"
}
18
Priyesh Diukar

Babel-upgradeを使用すると、スムーズにアップグレードできます。

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

npm Pruneその後、node_modulesの古いパッケージを破棄します。

編集：

Babel-upgradeを試しても、babelとwebpackの設定は変更されませんでした。手動で変更する必要がありました。以下に例を示します。

.babelrc

"presets": ["@babel/env", "@babel/react"]

webpack config

loader: 'babel-loader',
options: { presets: ['@babel/env', '@babel/react']}
4
ohkts11