构建配置抽离成npm包的意义
- 通用性
业务开发者无需关注构建配置
统一团队构建脚本 - 可维护性
构建配置合理的拆分
README文档、changelog文档等 - 质量
冒烟测试、单元测试、测试覆盖率等
持续集成
功能模块设计和目录结构
包功能设计
目录结构设计：
lib放置源码，test放测试代码
使用eslint规范构建脚本
// 增加.eslintrc.js文件
module.exports = {
parser: 'babel-eslint',
// 使用airbnb-base
extends: "airbnb-base",
env: {
browser: true,
node: true
}
}
执行命令：./node_modules/.bin/eslint lib/
在package.json中新增脚本:eslint --fix 可以自动处理空格
"eslint": "eslint /lib --fix"
执行后效果，可以看到报错数量大大减少了
冒烟测试
冒烟测试是指 对提交测试的软件在进行详细深入的测试之前而进行的预测试，目的是暴露导致软件基本功能失效等严重问题。
执行判断： 1.构建是否成功；2.每次构建完build目录是否有内容输出（js、css、html文件等）
实现步骤：
1.在test文件夹下建立smoke文件夹，template文件夹下放置构建产物，index为入口文件
const path = require('path');
const webpack = require('webpack');
const rimraf = require('rimraf');
const Mocha = require('mocha');
// 加个10s过期时间
const mocha = new Mocha({
timeout: '10000ms'
});
// 构建前，进入smoke路径中
process.chdir(path.join(__dirname, 'template'));
// 删除dist
rimraf('./dist', () => {
const prodConfig = require('../../lib/webpack.prod.js');
// webpack运行该配置
webpack(prodConfig, (err, stats) => {
if (err) {
console.error(err);
process.exit(2);
}
console.log(stats.toString({
colors: true,
modules: false,
children: false
}));
console.log('webpack build success, begin run test.')
mocha.addFile(path.join(__dirname, 'html-test.js'));
mocha.addFile(path.join(__dirname, 'css-js-test.js'));
mocha.run();
})
});
2.prodConfig引用的是require('../../lib/webpack.prod.js')，所以需要修改一下外目录文件webpack.base.js
// 由于smoke进入该文件时拿不到__dirname目录下的文件，替换掉__dirname
// process.cwd()返回当前工作目录，如：调用node命令执行脚本时的目录。
// __dirname返回源代码所在的目录。
const projectRoot = process.cwd();
3.配置静态资源检测文件
// html-test.js用来检测html是否生成出来
const glob = require('glob-all');
describe('checking generated html files', () => {
it('should generate html files', done => {
const files = glob.sync([
'./dist/index.html',
'./dist/search.html'
]);
if (files.length > 0) {
done()
} else {
throw new Error('no html files generated')
}
})
})
// css-js-test用来检测css和js资源是否生成出来
const glob = require('glob-all');
describe('checking generated css files', () => {
it('should generate css files', done => {
const files = glob.sync([
'./dist/index_*.js',
'./dist/index_*.css',
'./dist/search_*.js',
'./dist/search_*.css'
]);
if (files.length > 0) {
done()
} else {
throw new Error('no css files generated')
}
})
})
执行命令node test/smoke/index.js，结果如下：
单元测试和测试覆盖率
技术选型：Mocha+Chai
测试代码：describe，it，except
-describe:用于一个描述一个文件
-it：书写测试用例
-except：断言判断
测试命令：mocha add.test.js
const expect = require('chai').expect;
const add = require('../src/add');
describe('use expect: src/add.js', () => {
it('add(1, 2) === 3', () => {
expect(add(1, 2).to.equal(3));
});
实现步骤：
1.test目录下新建index.js作为入口文件
const path = require('path');
// 进入到产物目录
process.chdir(path.join(__dirname, 'smoke/template'));
describe('bulder-webpack test case', () => {
require('./unit/webpack-base-test');
})
2.test目录下新建uint文件夹，文件夹新建webpack-base-test.js
const assert = require('assert');
describe('webpack.base.js test case', () => {
const baseConfig = require('../../lib/webpack.base.js');
it('entry', () => {
assert.equal(baseConfig.entry.index, '/Users/xxx/Documents/webpack-test/builder-webpack/test/smoke/template/src/index/index.js');
assert.equal(baseConfig.entry.search, '/Users/xxx/Documents/webpack-test/builder-webpack/test/smoke/template/src/search/index.js');
})
})
3.package.json中新建test命令
"test": "./node_modules/.bin/_mocha"
执行后效果：
测试覆盖率：使用istanbul，修改test命令，使用报错了，后续排查一下。。。
"test": "istanbul cover ./node_modules/.bin/_mocha"
git commit规范和changelog生成
提交格式要求：
changelog生成，在本地增加precommit钩子
"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0" },
semver规范
主版本号:当你做了不兼容的 API 修改
次版本号:当你做了向下兼容的功能性新增
修订号:当你做了向下兼容的问题修正
先行版本号可以作为发布正式版之前的版本，格式是在修订版本号后面加上一个连接 号(-)，再加上一连串以点(.)分割的标识符，标识符可以由英文、数字和连接号 ([0-9A-Za-z-])组成。
· alpha:是内部测试版，一般不向外部发布，会有很多 Bug。一般只有测试人员使用
· beta:也是测试版，这个阶段的版本会一直加入新的功能。在 Alpha 版之后推出
· rc:Release Candidate) 系统平台上就是发行候选版本。RC 版不会再加入新的功能了，主 要着重于除错。
