webpack 之 webpack 构建配置的构建配置包、功能模块、目录结构、ESLint 规范、冒烟测试、单元测试和测试覆盖率

一、 webpack 构建配置的构建配置包、功能模块、目录结构、ESLint 规范、冒烟测试、单元测试和测试覆盖率

1. 构建配置抽离成 npm 包的意义，如下所示：

• 通用性，业务开发者无需关注构建配置，统一团队构建脚本
• 可维护性，构建配置合理的拆分，README 文档、ChangeLog 文档等
• 质量，冒烟测试、单元测试、测试覆盖率、持续集成

2. 构建配置管理的可选方案，如下所示：

• 通过多个配置文件管理不同环境的构建，webpack --config 参数进行控制
• 将构建配置设计成一个库，比如：hjs-webpack、Neutrino、webpack-blocks
• 抽成一个工具进行管理，比如：create-react-app、kyt、nwb
• 将所有的配置放在一个文件，通过 --env 参数控制分支选择

3. 构建配置包设计，如下所示：

• 通过多个配置文件管理不同环境的 webpack 配置，基础配置 webpack.base.js，开发环境 webpack.dev.js，生产环境 webpack.prod.js，SSR 环境 webpack.ssr.js
• 抽离成一个 npm 包统一管理，规范有 Git commit 日志、README、ESLint 规范、Server 规范，质量有冒烟测试、单元测试、测试覆盖率和 CI

4. 通过 webpack-merge 组合设置，合并配置如 module.exports = merge(baseConfig, devConfig);
5. 构建包设计，如下所示：

• 基础配置 webpack.base.js，资源解析中的解析 ES6、解析 React、解析 CSS、解析 Less、解析图片、解析字体，样式增强中的 CSS 前端补齐、CSS px 转换成 rem，目录清理、多页面打包、命令行信息显示优化、错误捕获和处理、CSS 提取成一个单独的文件
• 开发阶段配置 webpack.dev.js，代码热更新中的 CSS 热更新、JS 热更新，sourcemap
• 生产阶段配置 webpack.prod.js，代码压缩，文件指纹，Tree Shaking，Scope Hoisting，速度优化中的基础包 CDN，体积优化中的代码分割
• SSR 阶段配置 webpack.ssr.js，output 的 libraryTarget 设置，CSS 解析 ignore

6. 构建目录结构设计，lib 放置源代码，test 放置测试代码。
7. 使用 ESLint 规范构建脚本，使用 eslint-config-airbnb-base，eslint --fix 可以自动处理空格，代码如下：

module.exports = {
  "parser": "babel-eslint",
  "extends": "airbnb-base",
  "env": {
     "browser": true,
     "node": true
  }
};

8. 冒烟测试 smoke testing，是指对提交测试的软件在进行详细深入的测试之前而进行的预测试，这种预测试的主要目的是暴露导致软件需重新发布的基本功能失效等严重问题。
9. 冒烟测试执行，如下所示：

• 构建是否成功
• 每次构建完成 build 目录是否有内容输出，是否有 JS、CSS 等静态资源文件，是否有 HTML 文件

10. 判断构建是否成功，在项目里面运行构建，看看是否有报错，代码如下：

const path = require('path');
const webpack = require('webpack');
const rimraf = require('rimraf');
const Mocha = require('mocha');

const mocha = new Mocha({
  timeout: '10000ms',
});
process.chdir(_dirname);

rimraf('./dist', () => {
   const prodConfig = require('../../lib/webpack.prod');
   webpack(prodConfig, (err, stats) => {
     if (err) {
       console.log(err);
       return;
     }
     
     console.log(stats.toString({
        colors: true,
        modules: false,
        children: false,
        chunks: false,
        chunkModules: false
     }));
     
     console.log('\n' + 'Compiler success');
   })
});

11. 判断基本功能是否正常，编写 mocha 测试用例，是否有 JS、CSS 等静态资源文件，是否有 HTML 文件，代码如下：

const glob = require('glob-all');

describle('checking generated file exists', function () {
  it ('should generate html files', function(done) {
    const files = glob.sync([
       './dist/index.html',
       './dist/search.html'
    ]);
    if (files.length > 0) {
      done();
    } else {
      throw new Error('No html files found');
    }
  });
  
  it ('should generate js && css files', function (done) {
    const files = glob.sync([
      './dist/index_*.js',
      './dist/search_*.js',
      './dist/index_*.js',
      './dist/search_*.css',
    ]);
    if (files.length > 0) {
      done();
    } else {
      throw new Error('No files found');
    }
  });
});

12. 单元测试与测试覆盖率，如下所示：

• Mocha，单纯的测试框架，需要断言库，chai、should.js、expect 和 better-assert
• Jest，集成框架，开箱即用
• 极简 API

13. 编写单元测试用例，技术选型是 Mocha + Chai，测试代码是 describe、it、expect，测试，命令是 mocha add.test.js，代码如下：

const expect = require('chai').expect;
const add = require('../src/add');

describe('use expect add.js', () => {
  it('add(1,2) === 3', () => {
     expect(add(1,2).to.equal(3));
  });
});

14. 单元测试接入，如下所示：

• 安装 mocha + chai，通过 npm i mocha chai --D
• 新建 test 目录，并增加 xxx.test.js 测试文件
• 在 package.json 中的 scripts 字段增加 test 命令，代码如下：

"scripts": {
  "test": "node_modules/mocha/bin/_mocha"
},

• 执行测试命令，通过 npm run test 命令