Karma+mocha+es6+webpack配置自动化前端环境

安装依赖

1 全局安装 karma-cli

2 安装webpack 2/3

3 安装karma,karma-mocha,karma-chai,karma-chrome-launcher,mocha,chai

4 安装 karma-webpack, babel-core，babel-preset-dev,babel-loader,babel-plugin-istanbul

配置

karma init 初始化配置文件

根据配置文件做相应修改

主要是files,plugins,webpack,exclude

由于是es6模块引入，只要添加测试文件入口即可。

Plugins即上述的karma-x插件。

Webpack配置对象的子集，注意不用入口和输出配置。可在babel-loader的options配置preset:［"dev"］,plugins:［"istanbul"］.

Exclude 掉node_modules里的j s 。

使用karma-coverage

Preprocessor 添加待测试文件和测试文件，预处理器都为webpack 。

Reporter处添加coverage 。

可配置其输出位置。

使用karma-mocha-report 替换progress报告。

可配置其格式。

注意webpack只需要配置rules 不需要入口和出口，入口已经有karma的files控制了。

开启

karma start或者写入npm test中。

karma.config.js文件加入chai，则不用导入chai和expect

可能会遇到的问题

安装依赖问题

1karma-webpack 前先安装webpack 版本2,3不要4。

2各种module找不到，手动装完一个又一个。解决方案。手动删除node_modules，清空npm cache：npm cache clean --force，重装。还不行，就重新开启一个不同名的项目文件夹，完全干净的项目环境，否则系统缓存很强。

加入karma-coverage 可能会失效，显示各种0，检查webpack配置里添加istanbul插件。preprocessor里要加入如src里的待测试文件。