带有 eslint 加载器的 webpack babel 加载器

Question

我正在使用 webpack babel-loader 和 es-lint，就像这样

  {
    test: /\.(js)$/,
    exclude: /node_modules/,
    use: ['babel-loader', 'eslint-loader'],
  },

但是在 babel-loader 中，我在 webpack 上看到我必须像这样传递选项

options: {
  presets: ['@babel/preset-env']
}

但由于我使用的是加载器数组，因此我无法使用此选项，或者因为我将 eslint 与 babel 加载器一起使用，所以我不需要此 @babel/preset env？

Answer 1

即使使用eslint-loader，您可能仍想使用@babel/preset

@babel/preset-env 是一个智能预设，允许您使用最新的 JavaScript，而无需微观管理目标环境需要哪些语法转换（以及可选的浏览器 polyfill）。这既让你的生活更轻松，也让 JavaScript 包更小！ (source)

eslint-loader 将使所有由 Webpack 语法捆绑的代码由 eslint 检查（遵循您的 eslint 配置）。

您可以将 babel 配置保存在单独的文件中 .babelrc.json:

{
  presets: [
    '@babel/preset-env'
  ]
}

或使用webpack configuration:

use: [{ 
  loader: 'babel-loader',
  options: { presets: ['@babel/preset-env'] },
}, { 
  loader: 'eslint-loader'
}]