1

In short, I need to jshint tests specifications in parallel with the package sources during the build process.

Using the Webpack 3, how to make jshint-loader to watch out for two different folders with two different .jshintrc files? One pack of sources with .jshintrc is in the ./src folder, which is bundling to the end distributive, and the other one pack with another .jshintrc is in the ./test folder, which does not mentioned in the Webpack config (Karma handles it).

I tried the following two approaches, and both of them processed ./src only, they didn't do anything with ./test. First version of Webpack config:

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' }]
      }
    ]
},
// ...

The second version of Webpack config differs in the module-rules part:

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' }]
      }
    ]
},
// ...

But as I said this doesn't work. Full config/sources could be obtained from this repository. So is it possible to fix my approach or do I need try something quite different?

4

1 回答 1

0

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

1. 生产建设。这很简单，因为 jshit 应该只执行一次。在jshint作为依赖项添加到 npm-package 之后 –</p> 

npm install --save-dev jshint

它可以添加到构建脚本之前——</p> 

"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
  }
于 2017-11-18T21:04:53.747 回答