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

Question

我正在像这样使用带有 es-lint 的 webpack babel-loader

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

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

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

但是因为我使用的是加载程序数组，所以我不能使用这个选项，或者因为我使用的是带有 babel 加载程序的 eslint，所以我不需要这个 @babel/preset env ?

Answer 1

即使 eslint-loader

，您可能仍想使用 @babel/preset

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

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

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

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

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

webpack babel loader with eslint laoder