istanbul-instrumenter-loader

webpack 的 Istanbul instrumenter loader

通过 istanbul-lib-instrument 监测 JS 文件，以便生成代码覆盖率报告。

安装

npm install --save-dev istanbul-instrumenter-loader
# or
yarn add --dev istanbul-instrumenter-loader

配置

参考

• Loaders
• karma-webpack
• karma-coverage-istanbul-reporter

项目结构

假设你的项目结构如下：

├── src/
│   └── components/
│       ├── bar/
│       │   └── index.js
│       └── foo/
│           └── index.js
└── test/
    └── src/
        └── components/
            └── foo/
                └── index.js

为生成所有组件（包括你没写测试的那些）的代码覆盖率报告，你需要 require 所有业务和测试的代码。相关内容在 karma-webpack 其他用法中有涉及。

test/index.js

// require 所有 `project/test/src/components/**/index.js`
const testsContext = require.context('./src/components/', true, /index\.js$/);

testsContext.keys().forEach(testsContext);

// require 所有 `project/src/components/**/index.js`
const componentsContext = require.context('../src/components/', true, /index\.js$/);

componentsContext.keys().forEach(componentsContext);

以下为 Karma 的唯一入口起点文件。

karma.conf.js

config.set({
    …
    files: [
        'test/index.js'
    ],
    preprocessors: {
        'test/index.js': 'webpack'
    },
    webpack: {
        …
        module: {
            rules: [
                // 用 Istanbul 只监测业务代码
                {
                    test: /\.js$/,
                    include: path.resolve('src/components/'),
                    loader: 'istanbul-instrumenter-loader'
                }
            ]
        }
        …
    },
    reporters: [ 'progress', 'coverage-istanbul' ],
    coverageIstanbulReporter: {
        reports: [ 'text-summary' ],
        fixWebpackSourcePaths: true
    },
    …
});

配置选项

此 loader 支持 istanbul-lib-instrument 的所有配置选项。

License

MIT

原文：https://webpack.js.org/loaders/istanbul-instrumenter-loader/