我试图将Webpack和babel分别升级到4,7,但无法使其正常工作。此外,official doc对升级没有多大帮助
我有以下问题
编译错误:ERROR in找不到模块'@ 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"
如果需要更多详细信息,请告诉我。
巴贝尔介绍了一种名为@babel/core的东西。只需运行npm install @babel/core
。
Babel的大部分内容已经重命名为@babel/PACKGAGE_NAME
测试于[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"
}
您可以使用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']}