如何升级到 babel 7

Question

我尝试将Webpack和babel分别升级到4、7，但无法正常工作。另外 official doc 对升级

帮助不大

我遇到了以下问题

compiler error: ERROR in Cannot find module '@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"

如果需要更多详细信息，请告诉我。

Answer 1

Babel 将模块 babel-core 的名称更改为 @babel/core。只是运行 npm install @babel/core。这将安装最新版本的 Babel 核心。

Babel 中的大部分包已重命名以遵循模式 @babel/PACKAGE_NAME。因此，如果您想升级，请更改包名称以遵循模式和运行 npm install.

要升级到 Babel 7，您可以使用此 migration guide。

Answer 2

您可以使用babel-upgrade 来平滑升级。

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

之后您可能需要 npm prune 才能丢弃 node_modules 中的过时包。

编辑：

当我尝试 babel-upgrade 时，babel 和 webpack 配置没有被修改。所以我不得不手动更改它。这是例子。

.babelrc

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

webpack 配置

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

Answer 3

使用babel-upgrade

在 node@10.15.3、npm@6.4.1 和 babel@7.4.0[ 上测试=39=]

您可以使用以下脚本。（仅节点 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，请不要忘记将您的解析器设置为 babel-eslint，就像在您的 .eslintrc 文件中那样：

{ "parser": "babel-eslint" }

如何升级到 babel 7

How to upgrade to babel 7

reactjs

babeljs

webpack-4

babel-loader