Vue 进阶（五十六）：vue-cli 脚手架 karma.conf.js 配置文件详解

// This is a karma config file. For more details see// http://karma-runner.github.io/0.13/config/configuration-file.html// we are also using it with karma-webpack// https://github.com/webpack/karma-webpack
// 下面是webpack.test.conf配置文件，先来解释这个配置文件的内容var webpackConfig = require('../../build/webpack.test.conf')
// 下面是karma测试文件的配置方式module.exports = function (config) {    config.set({        // to run in additional browsers:        // 1. install corresponding karma launcher        //    http://karma-runner.github.io/0.13/config/browsers.html        // 2. add it to the `browsers` array below.        // 这里使用的是PhantomJS作为浏览器测试环境，这个插件支持DOM, CSS, JSON, Canvas, and SVG.的解析        browsers: ['PhantomJS'],        // 下面的测试框架是用来测试js        frameworks: ['mocha', 'sinon-chai', 'phantomjs-shim'],        // 下面的是用来出报告的        reporters: ['spec', 'coverage'],        // 下面指的是index.js文件在browsers里面运行        // 关于index.js其实就是把需要测试的文件都require进来，然后一股脑的在上面的browsers里面跑，使用frameworks测试js,通过reporters输出报告        files: ['./index.js'],        // 下面是为文件制定预处理器，也就是说测试index.js之前用webpack和sourcemap处理一下        preprocessors: {        './index.js': ['webpack', 'sourcemap']        },        // 下面给webpack指定相关的配置文件        webpack: webpackConfig,        webpackMiddleware: {            noInfo: true        },        // 下面是覆盖报告        // coverage是代码测试覆盖率的一个reporter，也就是说告诉你项目的代码有多少测试了        // 下面是vue-cli对这个的一个配置        coverageReporter: {            dir: './coverage',            reporters: [                { type: 'lcov', subdir: '.' },                { type: 'text-summary' }            ]        }    })}

// This is the webpack config used for unit tests.// 下面是工具配置文件，用来处理各种css文件var utils = require('./utils')// 引入webpack模块，使用内置插件或者方法var webpack = require('webpack')// 下面是用webpack-merge插件，用来合并配置对象var merge = require('webpack-merge')// 下面是webpack.base.conf.js配置文件，请自行查看我的其他博客var baseConfig = require('./webpack.base.conf')// 下面是合并配置对象var webpackConfig = merge(baseConfig, {// use inline sourcemap for karma-sourcemap-loadermodule: {   rules: utils.styleLoaders()},// 测试环境使用 inline-source-map生成map文件devtool: '#inline-source-map',resolveLoader: {   // 下面是配置如何解析Loader的，就是说使用scss-loader实际用sass-loader   alias: {   // necessary to to make lang="scss" work in test when using vue-loader's ?inject option    // see discussion at https://github.com/vuejs/vue-loader/issues/724   'scss-loader': 'sass-loader'   }},plugins: [   // 下面设置环境变量process.env是"testing"   new webpack.DefinePlugin({       'process.env': require('../config/test.env')   })]})
// no need for app entry during tests// 测试环境不需要入口文件，因为要测试的就是入口文件，哈哈// 使用delete操作符，删除对象中的某一项delete webpackConfig.entry
module.exports = webpackConfig

这个工具的基本用法如下：

module.exports = function(config){    config.set({        browsers: ['Chrome','Firefox'],        ...    })}