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

Question

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

使用 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 获得完整的 config/sources。那么是否可以修正我的方法，或者我是否需要尝试一些完全不同的方法？

Answer 1

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

1. Production build. 这很简单，因为 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 进程的

None 知道 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
  }

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

How to jsHint two different folders with Webpack?

testing

webpack

build

jshint

webpack-3