vue-cli腳手架build目錄中的karma.conf.js配置文件

本文系統講解vue-cli腳手架build目錄中的karma.conf.js配置文件

1. 這個配置文件是命令 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將測試運行在全部指定的瀏覽器上

2. 因爲這是一個系統的配置文件，將涉及不少的模塊和插件，因此這部份內容我將分多個文章講解，請關注我博客的其餘文章
3. 關於註釋
   • 當涉及到較複雜的解釋我將經過標識的方式(如（1）)將解釋寫到單獨的註釋模塊，請自行查看
4. 上代碼

// 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的內容感興趣的本身摸索吧