如何在Karma测试运行器中引入Webpack生成的Vendor Bundle

当然可以直接让Karma加载Webpack生成的vendor.bundle.js，这样就不用手动逐个引入依赖库了，下面是具体的实现步骤：

1. 确保Webpack先构建出vendor.bundle.js #

首先，你需要保证在运行Karma之前，Webpack已经完成了构建，生成了dist/vendor.bundle.js文件。可以在package.json的测试脚本中先执行Webpack构建：

{
  "scripts": {
    "test": "webpack --mode production && karma start karma.conf.js",
    "test:watch": "webpack --mode development --watch & karma start karma.conf.js"
  }
}

这样每次运行测试时，都会先更新最新的vendor bundle；如果需要监听文件变化自动重新构建，就用test:watch脚本。

2. 修改Karma配置文件，引入vendor.bundle.js #

在你的Karma配置中，把vendor.bundle.js添加到files数组的最前面（必须确保在你的应用TS文件之前加载，这样Angular等全局对象才能被测试代码访问到）：

module.exports = function (config) {
    config.set({
        basePath: '../',
        frameworks: ['jasmine', 'karma-typescript'],
        files: [
            // 先加载包含所有依赖的vendor bundle
            'dist/vendor.bundle.js',
            // 再加载应用的TS文件
            'app/**/*.ts'
        ],
        exclude: [],
        preprocessors: {
            'app/**/*.ts': ['karma-typescript']
        },
        // 可选：添加karma-typescript reporter以支持sourcemap调试
        reporters: ['progress', 'karma-typescript'],
        port: 9876,
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: true,
        browsers: ['PhantomJS'],
        singleRun: false,
        concurrency: Infinity,
        // 配置karma-typescript，避免重复编译依赖库
        karmaTypescriptConfig: {
            compilerOptions: {
                module: "commonjs",
                target: "es5",
                lib: ["es6", "dom"],
                allowJs: true
            },
            exclude: [
                // 排除node_modules，因为依赖已经打包在vendor里了
                "node_modules/**/*"
            ]
        }
    })
}

3. 关键注意事项 #

• 加载顺序优先级：vendor.bundle.js必须在应用TS文件之前加载，否则测试代码会因找不到Angular等全局对象报错。
• 避免重复编译：通过karmaTypescriptConfig.exclude排除node_modules，防止karma-typescript尝试编译已经打包到vendor里的依赖库，既节省构建时间又能避免冲突。
• Sourcemap支持：如果你的Webpack配置开启了sourcemap（比如devtool: 'source-map'），karma-typescript reporter会自动处理sourcemap，方便你在调试测试时定位到原始TS代码。

替代方案：用karma-webpack复用Webpack配置 #

如果不想单独维护Karma的文件列表，也可以使用karma-webpack插件，直接复用现有Webpack配置来处理测试代码的打包，无需手动加载vendor.bundle.js。不过这种方式会增加配置复杂度，适合需要更灵活测试构建流程的场景。

内容的提问来源于stack exchange，提问作者mindparse