我正尝试将我们的项目从Babel 6升级到7。我已经对package.json进行了以下更改:
"devDependencies": {
"babel-core": "6.26.3",
"babel-eslint": "10.0.1",
"babel-loader": "7.1.5",
"babel-plugin-syntax-dynamic-import": "6.18.0",
"babel-plugin-transform-class-properties": "6.24.1",
"babel-plugin-transform-es2015-destructuring": "6.23.0",
"babel-polyfill": "6.26.0",
"babel-preset-env": "1.7.0",
"babel-preset-es2015": "6.24.1",
"babel-preset-react": "6.24.1",
"webpack": "4.28.4",
"webpack-bundle-analyzer": "3.1.0",
"webpack-cli": "3.2.1",
"webpack-dev-server": "3.1.14",
"workbox-webpack-plugin": "3.6.3"
},
移除了babel-preset-*
并新增了新的@babel/*
包。同时,还添加了Jest。
"devDependencies": {
"@babel/cli": "7.2.3",
"@babel/core": "7.3.4",
"@babel/preset-env": "7.3.4",
"@babel/preset-react": "7.0.0",
"babel-eslint": "10.0.1",
"babel-loader": "8.0.5",
"babel-plugin-syntax-dynamic-import": "6.18.0",
"babel-plugin-transform-class-properties": "6.24.1",
"babel-plugin-transform-es2015-destructuring": "6.23.0",
"babel-polyfill": "6.26.0",
"jest": "24.3.0",
"react-test-renderer": "16.8.4",
"webpack": "4.28.4",
"webpack-bundle-analyzer": "3.1.0",
"webpack-cli": "3.2.1",
"webpack-dev-server": "3.1.14",
"workbox-webpack-plugin": "3.6.3"
},
我们的项目使用 Babel 和 Webpack,并通过
webpack.config.js
管理 Babel 配置。因此,在该文件中进行了以下更改:
webpack.config.js
module: {
rules: [
{
enforce: 'pre',
test: /\.js$/,
exclude: /node_modules/,
loader: 'eslint-loader'
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'env'],
plugins: ['transform-class-properties', 'syntax-dynamic-import', 'transform-es2015-destructuring', 'transform-object-rest-spread']
}
},
]
}
更新预设部分,使用@babel/react
和 @babel/env
.
module: {
rules: [
{
enforce: 'pre',
test: /\.js$/,
exclude: /node_modules/,
loader: 'eslint-loader'
},
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['@babel/react', '@babel/env'],
plugins: ['transform-class-properties', 'syntax-dynamic-import', 'transform-es2015-destructuring', 'transform-object-rest-spread']
}
},
]
}
当我运行
webpack --mode development
时,webpack 抛出以下错误:ERROR in ./src/entry2.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module 'babel-preset-react' from 'C:\MyApp'
- If you want to resolve "react", use "module:react"
- Did you mean "@babel/react"?
at Function.module.exports [as sync] (C:\MyApp\node_modules\resolve\lib\sync.js:58:15)
at resolveStandardizedName (C:\MyApp\node_modules\@babel\core\lib\config\files\plugins.js:101:31)
at resolvePreset (C:\MyApp\node_modules\@babel\core\lib\config\files\plugins.js:58:10)
at loadPreset (C:\MyApp\node_modules\@babel\core\lib\config\files\plugins.js:77:20)
at createDescriptor (C:\MyApp\node_modules\@babel\core\lib\config\config-descriptors.js:154:9)
at items.map (C:\MyApp\node_modules\@babel\core\lib\config\config-descriptors.js:109:50)
at Array.map (<anonymous>)
at createDescriptors (C:\MyApp\node_modules\@babel\core\lib\config\config-descriptors.js:109:29)
at createPresetDescriptors (C:\MyApp\node_modules\@babel\core\lib\config\config-descriptors.js:101:10)
at presets (C:\MyApp\node_modules\@babel\core\lib\config\config-descriptors.js:47:19)
at mergeChainOpts (C:\MyApp\node_modules\@babel\core\lib\config\config-chain.js:320:26)
at C:\MyApp\node_modules\@babel\core\lib\config\config-chain.js:283:7
at buildRootChain (C:\MyApp\node_modules\@babel\core\lib\config\config-chain.js:120:22)
at loadPrivatePartialConfig (C:\MyApp\node_modules\@babel\core\lib\config\partial.js:85:55)
at Object.loadPartialConfig (C:\MyApp\node_modules\@babel\core\lib\config\partial.js:110:18)
at Object.<anonymous> (C:\MyApp\node_modules\babel-loader\lib\index.js:140:26)
at Generator.next (<anonymous>)
at asyncGeneratorStep (C:\MyApp\node_modules\babel-loader\lib\index.js:3:103)
at _next (C:\MyApp\node_modules\babel-loader\lib\index.js:5:194)
at C:\MyApp\node_modules\babel-loader\lib\index.js:5:364
at new Promise (<anonymous>)
at Object.<anonymous> (C:\MyApp\node_modules\babel-loader\lib\index.js:5:97)
at Object.loader (C:\MyApp\node_modules\babel-loader\lib\index.js:56:18)
at Object.<anonymous> (C:\MyApp\node_modules\babel-loader\lib\index.js:51:12)
我不明白为什么webpack要查找babel-preset-react模块,当我已经更新了babel-loader的预设部分来使用@babel/react。它甚至会问"是否意味着@babel/react"?是的,这正是我所说的!有什么想法吗?
我在node_modules目录中使用grep搜索了babel-preset-react的引用,并得到了几个结果,来自于我们依赖项中的包(不是devDependencies)。但是,我认为npm install应该可以满足这些包的依赖关系。我错了吗?
最后,第四行提到使用"module:react"是在谈论什么?这与这里有关吗?
@babel/preset-react
https://babeljs.io/docs/en/babel-preset-react。此外,有一个工具可以帮助升级到babel 7-https://github.com/babel/babel-upgrade - soundslikeodd