在@babel/env和@babel/preset-env之间的Babel预设配置让我感到困惑。

Question

我尝试配置一个使用 Babel 和 Webpack 开发 JavaScript 的环境。

但是我不了解关于 presets 的 Babel 配置。

在 使用指南 中，我们可以看到使用 "@babel/env" 这个 preset。

但是在其他文档中，我找不到这样的配置，取而代之的是 "@babel/preset-env"，例如这里 https://babeljs.io/docs/en/babel-preset-env

我用我的有限英语能力在文档中反复查找，但是无法找出 "@babel/env" 和 "@babel/preset-env" 之间的区别，或许它们是一样的吗？

另外，目标集似乎不起作用。如果我希望我的 es6 脚本转换为兼容 ie8 的脚本，那么移除目标后也可以在 ie9+ 上正常运行，所以它并不是最重要的。

这是我的项目：sdk-dev-env

// https://babeljs.io/docs/en/configuration
const presets = [
  [
    '@babel/env',
    {
      // https://babeljs.io/docs/en/babel-preset-env#targets
      // TODO: how to compatibilite with ie 8
      targets: {
        ie: '8',
        edge: '17',
        firefox: '60',
        chrome: '67',
        safari: '11.1'
        /**
         * you can also set browsers in package.json
         * "browserslist": ["last 3 versions"]
         * relative links:
         * https://github.com/browserslist/browserslist
         */
      },
      corejs: '3',
      // corejs: { version: 3, proposals: true },
      /**
       * https://babeljs.io/docs/en/usage#polyfill
       * https://github.com/zloirock/core-js#babelpreset-env
       * "usage" will practically apply the last optimization mentioned above where you only include the polyfills you need
       */
      useBuiltIns: 'usage'
    }
  ]
]
const plugins = []

if (process.env['ENV'] === 'prod') {
  // plugins.push(...);
}
module.exports = { presets, plugins }

我希望了解它们是否相同，如果不同，有何区别。

以及如何最佳地使用babeljs 7.4和core-js 3。

- whidy

Answer 1

也许它们是一样的吗？ 这是正确的，preset- 部分是可选的。既然你正在做...

presets: ["@babel/env"]

Babel已知道它是一个预设，因为它在presets数组中，因此它会自动将preset-添加到模块名称中。

这也适用于plugins。

有关更多示例，请参见Babel问题中实施的表格。

- loganfsmyth

---

谢谢。这就是那种无助于帮助人们的“魔法”，只会让人们感到困惑。难怪前端工具看起来像一个永远无法结束的配置噩梦。 - o01

我的问题是，它是否与插件模块相同？ - defend orca

@defendorca 是的，这也适用于“插件”，我已经编辑了答案。 - loganfsmyth