代码之家 › 专栏 › 技术社区 › khajjit

如何用Webpack提示两个不同的文件夹?

webpack-3 jshint build webpack testing

khajjit · 技术社区 · 7 年前

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

使用网页3,如何制作 jshint-loader 注意两个不同的文件夹,其中包含两个不同的 .jshintrc 文件夹?一组来源 .jshintrc公司 是在 ./src 文件夹,捆绑到分发端,另一个打包 .jshintrc公司 是在 ./test 文件夹,这在网页包配置中没有提及(Karma处理它)。

我尝试了以下两种方法,并且都进行了处理 ./src公司 只是,他们什么都没做 . 网页包配置的第一个版本:

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 config在模块规则部分有所不同:

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 . 那么,有没有可能修复我的方法,或者我需要尝试一些完全不同的方法?

1 回复 | 直到 7 年前

dhilt 7 年前

经过一些研究,我们能够通过将情况分为两部分来解决这个问题:生产构建期间的jshinting测试(只有一次,分布式在磁盘上)和开发过程中的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 让我们在网页包配置的模块部分再添加一条规则:

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
  }