vue-cli脚手架build目录中的karma.conf.js配置文件
2017-06-30 13:20
1721 查看
本文系统讲解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的内容感兴趣的自己摸索吧
相关文章推荐
- 底层:vue-cli脚手架build目录中的webpack.prod.conf.js配置文件
- vue-cli脚手架build目录中的webpack.dev.conf.js配置文件
- vue-cli脚手架build目录中的webpack.prod.conf.js配置文件
- vue-cli脚手架build目录中的webpack.base.conf.js配置文件
- vue-cli脚手架build目录中的build.js配置文件
- vue-cli脚手架build目录下utils.js工具配置文件详解
- vue-cli脚手架build目录下utils.js工具配置文件详解
- 详解vue-cli脚手架build目录中的dev-server.js配置文件
- vue-cli脚手架config目录下index.js配置文件
- vue-cli脚手架config目录下index.js配置文件的方法
- 介绍vue-cli脚手架config目录下index.js配置文件
- vue-cli脚手架config目录下index.js配置文件详解
- vue-cli脚手架中webpack配置基础文件详解
- vue2.0 配置build项目打包目录、资源文件(assets\static)打包目录
- vue-cli脚手架-bulid下的配置文件
- vue-cli创建的项目不需要再创建webpack-config.js文件,因为已经配置过了
- vue-cli脚手架build目录中的dev-server.js配置文件
- vue-cli的webpack模版项目配置解析-build/dev-server.js
- vue-cli中的check-versions.js配置文件包括semver,chalk,shell插件的解释
- vue-cli的webpack模版,相关配置文件dev-server.js与webpack.config.js配置解析