Webpack学习系列(八)构建配置包设计/冒烟测试/单元测试/测试覆盖率

gou构建配置抽离成npm包的意义

1.通用性：业务开发者无需关注构建配置；统一团队构建脚本

2.可维护性：构建配置合理的拆分；README文档，ChangeLog文档等

3.质量：冒烟测试，单元测试，测试覆盖率；持续集成

通过多个配置文件管理不同环境的构建，webpack --config 参数进行控制

1.webpack.config.js/webpack.dev.js/webpack.prod.js

2.构建包设计成一个库：hjs-webpack, Neutrino

3.抽成一个工具进行管理：比如create-react-app, kyt, new

4. 将所有的配置放在一个文件，通过--env参数控制分支选择

构建配置包设计

基础配置：webpack.base.js

开发环境：webpack.dev.js

生产环境：webpack.prod.js

SSR环境：webpack.ssr.js

抽离成一个npm包统一管理

规范：Git commit日志，README, ESLint规范，Semver规范

质量：冒烟测试，单元测试，测试覆盖率和CI

通过 Webpack-merge组合配置

merge = require("webpack-merge")

merge策略：

merge({a:[1], b:5, c:20}, {a:[2], b:10, d:421}) -> {a: [1, 2], b:10, c:20, d:421}

合并配置

module.exports = merge(baseConfig, devConfig)

构建包功能设计

冒烟测试 smoking test

对提交测试的软件在进行详细深入的测试之前而进行的预测试，这种预测试的主要目的是暴露导致软件重新发布的基本功能问题

利用工具验证一下两步输出

1. 构建是否成功

2. 每次构建完成build目录是否有内容输出：JS,CSS等静态资源文件，是否有HTML文件

构建是否成功？

1. npm i rimraf -D

2. 建立如下文件夹，其中template是待打包文件，这里直接引用之前的一些文件了，注意要删除之前的webpack配置文件，因为要用本次新编写的webpack文件。

3. 编写测试代码(已上传github)

检查是否有内容输出

1. npm i mocha -D

2. npm i glob-all -D

3. 编写测试代码(已上传github)

执行

1. 安装esLint 进行格式检查，改写package.josn，添加命令

2. node test/smoke/index 运行测试文件

单元测试与测试覆盖率

1. npm i istanbul -D

2. 修改 package.json 注意 不能和视频意义 直接使用 istanbul cover ./node_modules/.bin/_mocha

要更改mocha路径

3. npm run istanbul