如何使用 Webpack jsHint 两个不同的文件夹？答案

【问题标题】：How to jsHint two different folders with Webpack?如何使用 Webpack jsHint 两个不同的文件夹？
【发布时间】：2017-11-14 17:07:30
【问题描述】：

简而言之，我需要在构建过程中与包源并行地 jshint 测试规范。

使用Webpack 3，如何让jshint-loader 监视带有两个不同.jshintrc 文件的两个不同文件夹？一包带有.jshintrc 的源码在./src 文件夹中，该文件夹捆绑到最后分发，另一包带有另一个.jshintrc 在./test 文件夹中，在Webpack 配置中未提及（Karma 处理它）。

我尝试了以下两种方法，它们都只处理了./src，它们没有对./test做任何事情。第一个版本的 Webpack 配置：

entry: {
    'ui-scroll': path.resolve(__dirname, '../src/ui-scroll.js'),
    'ui-scroll-grid': path.resolve(__dirname, '../src/ui-scroll-grid.js')
},    
module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: { presets: ['es2015'] }
      },
      {
        enforce: 'pre',
        test: /\.js$/,
        include: path.resolve(__dirname, '../src'),
        use: [{ loader: 'jshint-loader' }]
      },
      {
        enforce: 'pre',
        test: /\.js$/,
        include: path.resolve(__dirname, '../test'),
        use: [{ loader: 'jshint-loader' }]
      }
    ]
},
// ...

第二版的 Webpack 配置在 module-rules 部分有所不同：

module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: { presets: ['es2015'] }
      },
      {
        enforce: 'pre',
        test: /\.js$/,
        include: [
          path.resolve(__dirname, '../src'),
          path.resolve(__dirname, '../test')
        ],
        use: [{ loader: 'jshint-loader' }]
      }
    ]
},
// ...

但正如我所说，这不起作用。完整的配置/来源可以从this repository 获得。那么是否有可能修复我的方法或者我需要尝试一些完全不同的方法？

【问题讨论】：

标签： testing webpack build jshint webpack-3

【解决方案1】：

经过一些研究，我们能够通过将情况分为两部分来解决这个问题：在生产构建期间（只有一次，分布在磁盘上）和开发过程中（监视模式，分布在内存中）进行 jshinting 测试)。

1.生产构建。 这很简单，因为 jshit 应该只执行一次。添加 jshint 作为 npm-package 的依赖项后 –

npm install --save-dev jshint

它可以添加到构建脚本之前 –

"hint-tests": "jshint --verbose test",
"build": "npm run hint-tests && npm run prod-build && npm run prod-test"

prod-build 和 prod-test 进程都不知道 jshint。

2。开发。解决办法是通过glob添加一个新的入口点：

entry: {
  'ui-scroll': path.resolve(__dirname, '../src/ui-scroll.js'),
  'ui-scroll-grid': path.resolve(__dirname, '../src/ui-scroll-grid.js')
  'test': glob.sync(path.resolve(__dirname, 'test/*.js')) // development only!
}

它应该只用于开发环境，否则你会在分发文件夹中得到一个额外的包。所以我们有它在记忆中；由于额外的捆绑，它会稍微影响开发进程，但由于这只发生在内存中，差异并不显着。然后使用jshint-loader 让我们在 webpack 配置的模块部分再添加一条规则：

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel-loader',
      options: { presets: ['es2015'] }
    },
    { // this is both for prod and dev environments
      enforce: 'pre',
      test: /\.js$/,
      include: path.resolve(__dirname, 'src'),
      use: [{ loader: 'jshint-loader' }]
    },
    { // this is only for dev environment
      enforce: 'pre',
      test: /\.js$/,
      include: path.resolve(__dirname, 'test'),
      use: [{ loader: 'jshint-loader' }]
    }
  ]
}

控制台输出中可能有太多日志，尤其是在开发服务器工作期间，因此通过stats 属性限制输出可能会有所帮助：

  stats: {
    modules: false,
    errors: true,
    warnings: true
  }

【讨论】：