在 webpack config 中定义多个 babel preset 配置
Defining multiple babel preset configurations in webpack config
我创建了一个 webpack.config.js
文件,用于导出两个不同的 WebPack 配置对象。我需要为这些中的预设设置不同的 babel 选项。经过一番研究后,我尝试创建两个不同的加载器配置,每个都将不同的 targets
选项传递给预设,如下所示:
// default JS loader config for browsers that support <script type='module'
{
loader:'babel-loader',
options:{
presets: ['@babel/preset-env', {
targets: {
esmodules: true
}
}]
}
}
...
// fallback for browsers that load the <script nomodule
{
loader:'babel-loader',
options:{
presets: ['@babel/preset-env', {
targets: "> 0.5% in UK, last 2 versions, not dead, ie 11"
}]
}
}
但是我显然是错误的,因为我在构建 WebPack 时遇到了这个错误
ERROR in ./some-path/WorkflowStage.class.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
ReferenceError: [BABEL] e:\some-path\WorkflowStage.class.js: Unknown option: .targets. Check out https://babeljs.io/docs/en/babel-core/#options for more information about options.
我认为问题的症结在于:当我有多个预设时,我应该如何从我的 webpack.config.js
文件中将目标选项传递给 @babel/preset-env
?
基本上你的加载器选项必须看起来像 JS 编码的 .babelrc
。每个带有选项的预设都必须在它自己的数组中。
所以,替换
{
loader: 'babel-loader',
options: {
presets: [
// defines the @babel/preset-env as the first preset
'@babel/preset-env',
// defines an invalid object as a preset (throws error)
{ targets: { esmodules: true } }
]
}
}
与
{
loader: 'babel-loader',
options: {
presets: [
// defines a preset with options
[
'@babel/preset-env', {
targets: {
esmodules: true
}
}
]
]
}
}
我创建了一个 webpack.config.js
文件,用于导出两个不同的 WebPack 配置对象。我需要为这些中的预设设置不同的 babel 选项。经过一番研究后,我尝试创建两个不同的加载器配置,每个都将不同的 targets
选项传递给预设,如下所示:
// default JS loader config for browsers that support <script type='module'
{
loader:'babel-loader',
options:{
presets: ['@babel/preset-env', {
targets: {
esmodules: true
}
}]
}
}
...
// fallback for browsers that load the <script nomodule
{
loader:'babel-loader',
options:{
presets: ['@babel/preset-env', {
targets: "> 0.5% in UK, last 2 versions, not dead, ie 11"
}]
}
}
但是我显然是错误的,因为我在构建 WebPack 时遇到了这个错误
ERROR in ./some-path/WorkflowStage.class.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
ReferenceError: [BABEL] e:\some-path\WorkflowStage.class.js: Unknown option: .targets. Check out https://babeljs.io/docs/en/babel-core/#options for more information about options.
我认为问题的症结在于:当我有多个预设时,我应该如何从我的 webpack.config.js
文件中将目标选项传递给 @babel/preset-env
?
基本上你的加载器选项必须看起来像 JS 编码的 .babelrc
。每个带有选项的预设都必须在它自己的数组中。
所以,替换
{
loader: 'babel-loader',
options: {
presets: [
// defines the @babel/preset-env as the first preset
'@babel/preset-env',
// defines an invalid object as a preset (throws error)
{ targets: { esmodules: true } }
]
}
}
与
{
loader: 'babel-loader',
options: {
presets: [
// defines a preset with options
[
'@babel/preset-env', {
targets: {
esmodules: true
}
}
]
]
}
}