前端工具链综述
工具链在前端领域扮演着很重要的角色。如何为Javascript生产环境构建去构建一套工具链,来覆盖前端各个开发环节,是我们需要了解学习的。而一套高效的工具链体系,对于每一个前端团队来说都有着至关重要的意义,它不仅可以提高团队的开发效率,还可以在一定程度上规范前端开发的各个环节,进而为团队节省一些人员协作和调整的成本。
综上,前端工具链旨在友好开发体验,提升开发团队开发效率。
而要构建一个工具链,首先我们先要了解在前端开发领域有哪几个环节:
- 项目初始化
- 开发、调试、构建
- 单元测试
- 发布
所以一个前端工具链,它大致都会包含上面这一系列功能。而一个典型的示例就类似于下面:
- Yeoman
- Webpack
- Mocha
- 发布系统
我们可以将进而将它总结成下面几块:
- 脚手架
- 构建⼯具
- 测试工具
- 发布系统
而上了规模的团队也都会针对以上的流程,制定一个工具链,并将它包装成一个黑盒形式,让程序员在每个环节只需要运行简单命令行,即可进入开发流程。
而从整体上了解工具链相关的知识体系,熟悉其大致结构以及运作方式,也是十分重要的。
所以,下面这里是本人将对于工具链相关基础知识的一些整理。这一篇我们首先来介绍的是,工具链中的测试工具。
工具链系列文章指路:
单元测试工具
测试工具是前端工具链里非常重要的一环,对于大部分的开源项目来说,测试都是一个必需品。如果我们某个项目是一个被高度复用的东西,那测试的收益也是很高的,所以除非是一次性使用的代码,我们还都是要使用单元测试 。
下面介绍一些当前最流行的测试工具和一些配套设施:
这里有流行的两个库一个是Mocha,一个是Jest
Mocha
Mocha最早是一个针对Node.js的一个测试框架,它默认在使用Webpoack之前,它都是不支持import export的,这里我们例子里使用的是require。
1. 安装
npm install -g mocha
npm install --save-dev mocha
2.基本使用
//test/test.js
var assert = require('assert');
var add = require('../add.js')
describe('add function testing', function () {
it('1 + 2 shuold be 3', function() {
assert.equal(add(1, 2), 3);
});
it('-5 + 2 shuold be -3', function() {
assert.equal(add(-5, 2), -3);
});
})
// add.js
function add (a, b) {
return a + b
}
module.exports = add
3.引入babel
这里我们引入babel来解决一下add.js必须用node的方式module.exports的问题。而简单的方法,我们可以用webpack项目,然后在dist里面去做单元测试,但从理论上考虑,测试这个环节依赖于build这个环节,是一件不太好的做法。另外,这对后面做code coverage话以上面这种方式的话,会带来不必要的麻烦。
所以我们这里用babel给我们提供一个方案,去解决。
这个方案是babel register。
安装
npm install --save-dev @babel/core @babel/register
npm install --save-dev @babel/preset-env
然后配置一下babel。
命令
./node_moudules/.bin/mocha --require @babel/register
4. code coverage
code coverage表示我们的测试到底覆盖了源文件的哪些代码。这里我们介绍一个新的工具叫做nyc,它可以在一个复杂的文件中,测试它最终测试的覆盖比例。
- 安装
npm install --save-dev nyc
- 命令
nyc ./node_modules/.bin/mocha
这里我们加入babel使用:
- 安装两个插件
npm install --save-dev @istanbuljs/nys-config-babel
npm install --save-dev babel-plugin-istanbul
- 在package.json中添加两个script项
"scripts": {
"test": "mocha --require @babel/register",
"coverage": "nyc mocha"
},
- 我们写测试用例的时候用
npm run coverage
,写业务代码的时候用的是npm run test
对html-parser进行单元测试
这里要完成的是对我之前写一个html-parser添加单元测试。
这里将之前的代码拷贝,新建一个目录然后重复完成上述操作。
然后执行命令,将单元测试跑起来。
结果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nadMxImP-1623671339940)(./img/img01.jpg)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NOpYzOST-1623671339944)(./img/img02.jpg)]
由上图可知,测试用例覆盖率是30%多,下面我们将通过修改用例实现90%以上覆盖。
// parser-test.js
var assert = require('assert');
import {
parseHTML} from '../src/parser'
describe('parse html:', function () {
it('<a></a>', function() {
let tree = parseHTML('<a></a>')
assert.equal(tree.children[0].tagName, 'a');
as