如何将构建的文件排除在 webpack 的覆盖范围之外答案

【问题标题】：How to exclude the built file from coverage in webpack如何将构建的文件排除在 webpack 的覆盖范围之外
【发布时间】：2017-11-11 17:50:38
【问题描述】：

在this guide 之后，我已将 istanbul-instrumenter 添加到我的测试配置中，以获取显示其余文件的“未捆绑”覆盖率报告。但是，捆绑的测试文件仍然显示在build/：

----------------------------|----------|----------|----------|----------|----------------|
File                        |  % Stmts | % Branch |  % Funcs |  % Lines |Uncovered Lines |
----------------------------|----------|----------|----------|----------|----------------|
All files                   |    70.78 |    36.36 |    69.23 |    60.95 |                |
 build                      |    67.39 |    31.03 |    66.67 |    53.93 |                |
  tests.js                  |    67.39 |    31.03 |    66.67 |    53.93 |... 208,209,211 |
 src/routes/Home            |      100 |       75 |      100 |      100 |                |
  index.js                  |      100 |       75 |      100 |      100 |             11 |
 src/routes/Home/components |      100 |       75 |      100 |      100 |                |
  HomeView.js               |      100 |       75 |      100 |      100 |             18 |
----------------------------|----------|----------|----------|----------|----------------|
✨  Done in 14.19s.

到目前为止，这是我的测试配置。我认为在 istanbul-instrumenter-loader 子句中排除 build 会做到这一点，但它似乎没有：

var nodeExternals = require('webpack-node-externals');
var path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

var project = require('../project.config');
const inProject = path.resolve.bind(path, project.basePath);
const inProjectSrc = (file) => inProject(project.srcDir, file);
const __DEV__ = project.env === 'development';

const extractStyles = new ExtractTextPlugin({
  filename: 'styles/[name].[contenthash].css',
  allChunks: true,
  disable: __DEV__
});

module.exports = {
  entry: {
    main: ['./tests/test-bundler.js']
  },
  target: 'node',
  output: {
    path: path.resolve('./build', project.basePath),
    filename: 'build/tests.js'
  },
  externals: [nodeExternals()],
  module: {
    rules: [            
      {
        test: /\.js?$/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            cacheDirectory: true,
                            plugins: [
                                'babel-plugin-transform-class-properties',
                                'babel-plugin-syntax-dynamic-import',
                                [
                                    'babel-plugin-transform-runtime',
                                    {
                                        helpers: true,
                                        polyfill: false, // we polyfill needed features in src/normalize.js
                                        regenerator: true
                                    },
                                ],
                                [
                                    'babel-plugin-transform-object-rest-spread',
                                    {
                                        useBuiltIns: true // we polyfill Object.assign in src/normalize.js
                                    },
                                ],
                            ],
                            presets: [
                                'babel-preset-react',
                                ['babel-preset-env', {
                                    targets: {
                                        ie9: true,
                                        uglify: true,
                                        modules: false
                                    }
                                }],
                            ]
                        }
                    }
                ],
        exclude: /node_modules/
      },
        {
                test: /\.(sass|scss)$/,
                use: [
          'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]__[hash:base64:5]',
          'sass-loader',
                ]
            },
            {
                test: /\.(gif|png|jpe?g|svg)$/i,
                loaders: [
                    'file-loader',
                    {
                        loader: 'image-webpack-loader',
                        query: {
                            progressive: true,
                            optipng: {
                                optimizationLevel: 7
                            },
                            gifsicle: {
                                interlaced: false
                            },
                            pngquant: {
                                quality: '65-90',
                                speed: 4
                            }
                        }
                    }
                ]
            },
            {
                // delays coverage til after tests are run, fixing transpiled source
                // coverage error
                enforce: 'post', 
                test: /\.js$/,
                exclude: /(tests|node_modules|bower_components|build)\//,
                loader: 'istanbul-instrumenter-loader'
            }
    ]
    },
  resolve: {
    extensions: ['.js', '.jsx']
  }
};

如何确保入口点build/tests.js不用于覆盖率计算？

【问题讨论】：

标签： webpack code-coverage webpack-2 istanbul

【解决方案1】：

我怀疑您的 exclude 正则表达式没有按预期工作。您在哪个环境中运行您的项目？

无论如何，由于您只想在 src 文件夹上运行覆盖套件，您可能会反转排除/包含逻辑并继续使用（记住需要 Node 的 path）：

{
   enforce: 'post', 
   test: /\.js$/,
   include: path.resolve(__dirname, 'src'),
   loader: 'istanbul-instrumenter-loader'
}

【讨论】：

关于include 属性的观点很好。然而，结果是一样的。（这是在 OSX 上运行的。）

【解决方案2】：

我遇到了同样的问题，并尝试在下面添加 folderNames' 并成功排除覆盖报告中这些文件夹下的所有文件

{
   enforce: 'post', 
   loader: 'istanbul-instrumenter-loader'
   exclude: [ /(<folderName1>|<folderName2>|node_modules|\.spec\.ts$)/, ],
}

注意：我使用的是 karma + webpack + istanbul 的组合

【讨论】：