reactjs - 尝试从 Babel 6 升级到 Babel 7 时,webpack 模块构建失败
问题描述
我正在尝试将我们的项目从 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
. 因此,对该文件进行了以下更改:
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)
babel-preset-react
当我更新了 babel-loader 的预设部分以使用“@babel/react”时,我不明白为什么 webpack 正在寻找一个模块。哎呀,它甚至问,“你是说@babel/react 吗?” 为什么,是的——我就是这么说的!有什么想法吗?
我在node_modules
目录中找到了对“babel-preset-react”的引用,并从我们的依赖项(而不是 devDependencies)部分中的包中获得了几个命中。但是,我会假设这npm install
会满足这些包的依赖关系。我错了吗?
最后,当第 4 行提到使用“module:react”时,它在说什么?这有关系吗?
解决方案
推荐阅读
- python - 盈透证券 Python API 错误 -1 322 处理请求
- facebook-graph-api - API 中未返回 Facebook 用户个人资料链接
- r - 如何在R中循环遍历mapply?
- swift - 如何在 Firestore 中使用文档 ID 创建复合索引
- java - 如何在java中每秒运行60次代码
- node.js - 在我的 slackbot 应用程序中,函数被节点执行两次
- javascript - 如何让全局变量留在角度构造函数和承诺中,调用需要来自 diff 组件的数据的函数
- javascript - 自定义设置方法不起作用(javascript)
- android - Android 运行时错误:芯片膨胀期间发生的 ID 0x00000001 无效
- apache-spark-sql - 在 Spark SQL 中使用字符串变量作为日期过滤观察结果