如何使用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' }]
}
]
},
// ...

但正如我所说，这行不通。可以从此存储库获取完整的配置/源。那么，有可能修正我的方法吗？还是我需要尝试一些完全不同的方法？

Answer 1

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

1.生产构建这很简单，因为jshit应该只执行一次。在将jshint作为依赖项添加到npm包之后——

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-config的模块部分再添加一条规则：

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
}