本文系統講解vue-cli腳手架build目錄中的karma.conf.js配置文件
- 這個配置文件是命令 npm run unit 的入口配置文件，主要用於單元測試
- 這條命令的內容如下 "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run"
這條命令中的 cross-env 是跨平台設置環境變量，你在命令行中設置環境變量加上這句話就是了
karma start test/unit/karma.conf.js 是使用karma測試server來運行測試
--single-run 是指定的參數，用來告訴karma將測試運行在所有指定的瀏覽器上
- 由於這是一個系統的配置文件，將涉及很多的模塊和插件，所以這部分內容我將分多個文章講解，請關注我博客的其他文章
- 關於注釋
- 當涉及到較復雜的解釋我將通過標識的方式(如（1）)將解釋寫到單獨的注釋模塊，請自行查看
- 上代碼
// 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配置文件，先來解釋這個配置文件的內容
// 詳情請看 (1)
var webpackConfig = require('../../build/webpack.test.conf')
// 下面是karma測試文件的配置方式
// 先介紹一下karma,詳情看 (2)
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' }
]
}
})
}
解釋
(1) 本文解釋 webpack.test.conf.js 配置文件
這個配置文件用來指定測試環境的webpack配置
// 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-loader
module: {
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
(2) karma
這個工具是一個平台，把模擬真實的瀏覽器插件、js測試框架等插件集合到一起構建一個用於測試代碼的一個平台
這個工具的基本用法就是
module.exports = function(config){
config.set({
browsers: ['Chrome','Firefox'],
...
// 這里還有很多設置項，具體查閱 https://karma-runner.github.io/latest/config/browsers.html
})
}
結語
這個測試框架如果有興趣可以自行深入了解，難度不亞於webpack
后面還有一個 npm run e2e 這個命令運行的是 nightwatch的端到端的測試，也就是說，上面的操作是確保程序能夠在瀏覽器中跑起來，而nightwatch是用來模擬用戶來測試在瀏覽器中程序運行起來有沒有bug，通過nightwatch的配置來測試
通過npm run test可以運行上面的所有設置
關於這部分內容，vue-cli只是做個一個框子出來，如果你想使用這部分東西你要編寫部分配置，但是這部分內容對於前端來說顯得有點牽強，說白了就是上手很難東西很多又不是特別重要。
這里我關於vue-cli的介紹就到此為止了，nightwatch的內容感興趣的自己摸索吧
