在 React 和 Webpack 项目上从“babel-preset-es2015”过渡到“babel-preset-env”时出现问题
Posted
技术标签:
【中文标题】在 React 和 Webpack 项目上从“babel-preset-es2015”过渡到“babel-preset-env”时出现问题【英文标题】:Issue when transitioning from "babel-preset-es2015" to "babel-preset-env" on React and Webpack project 【发布时间】:2018-03-24 23:49:12 【问题描述】:我有一个使用 babel-preset-es2015
的 React 项目,该项目使用 webpack 构建得很好,但自从我移至 babel-preset-env
后,模块构建失败。
出现此错误信息:
ERROR in ./src/index.js
Module build failed: Error: Couldn't find preset "es2015" relative to directory "/path/to/project"
at /path/to/project/node_modules/babel-core/lib/transformation/file/options/option-manager.js:293:19
at Array.map (<anonymous>)
at OptionManager.resolvePresets (/path/to/project/node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
at OptionManager.mergePresets (/path/to/project/node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
at OptionManager.mergeOptions (/path/to/project/node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
at OptionManager.init (/path/to/project/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
at File.initOptions (/path/to/project/node_modules/babel-core/lib/transformation/file/index.js:212:65)
at new File (/path/to/project/node_modules/babel-core/lib/transformation/file/index.js:135:24)
at Pipeline.transform (/path/to/project/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
at transpile (/path/to/project/node_modules/babel-loader/lib/index.js:50:20)
at Object.module.exports (/path/to/project/node_modules/babel-loader/lib/index.js:175:20)
以下是我的 webpack 配置:
工作(使用 babel-preset-2015)
module.exports =
...
module:
rules: [
test: /\.js$/,
exclude: /node_modules/,
use:
loader: 'babel-loader',
options:
presets: [
'es2015',
'react',
'stage-1']
]
,
...
;
不起作用(使用 babel-preset-env)
module.exports =
...
module:
rules: [
test: /\.js$/,
exclude: /node_modules/,
use:
loader: 'babel-loader',
options:
presets: [
'env',
'react',
'stage-1']
]
,
...
;
package.json 依赖项:
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.0"
【问题讨论】:
这很奇怪。您是否尝试过删除node_modules
并重新创建npm install
?
你更新了你的 .babelrc 文件了吗?
@Oblosys 我有,但没有帮助。
@Jaxx 我没有 .babelrc。如果我在 webpack 文件的 'options' 下有预设,我需要有一个吗?
奇怪的是,根据您的错误,即使您切换到 env,您的应用程序的某些部分仍会继续引用 es2015 预设。所以这个错误并不是真的关于 env-preset 不起作用,它更多的是一个过时的代码的干扰问题。你可以试试@Oblosys 的建议。对“es2015”的完整项目搜索也可能会发现一些有趣的东西。
【参考方案1】:
所以我添加了一个 .babelrc 文件并将加载器选项移到那里,现在看起来一切正常。仍然不确定为什么它在 webpack 模块中不起作用。
Webpack
module.exports =
...
module:
rules: [
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader'
]
,
...
;
.babelrc
"presets": [
"env",
"react",
"stage-1"
]
【讨论】:
以上是关于在 React 和 Webpack 项目上从“babel-preset-es2015”过渡到“babel-preset-env”时出现问题的主要内容,如果未能解决你的问题,请参考以下文章
webpack项目篇(六十六):react 全家桶 和 webpack 开发 h5 商城项目的整体思路
在 React 项目中使用 System.import 进行 Tree Shaking 和延迟加载的 Webpack 2 配置