testing - 如何使用 Webpack jsHint 两个不同的文件夹？

Question

简而言之，我需要在构建过程中与包源代码并行 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: [
      {
        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 获得完整的配置/源代码.那么是否可以修正我的方法，或者我是否需要尝试一些完全不同的方法？

Answer 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
  }