前端构建工具与应用程序测试

article/2025/11/3 19:26:20

1、前端构建工具

什么是前端构建？

什么是构建工具？

自动构建工具

Npm Scripts（推荐）
Npm Scripts（NPM脚本）是一个任务执行者。NPM是安装Node时附带的一个包管理器，Npm Script 则是 NPM 内置的一个功能，允许在 package.json 文件里面使用 scripts 字段定义任务。
优点：npm scripts 的优点是内置，无需安装其他依赖
缺点：功能太简单，虽然提供了 pre 和 post 两个钩子，但不能方便的管理多个任务之间的依赖。
Gulp
Gulp 是一个基于流的自动化构建工具。除了可以管理任务和执行任务，还支持监听文件、读写文件。Gulp 被设计的非常简单，只通过下面5个方法就可以支持几乎所有构建场景：
通过 gulp.task 注册一个任务；
通过 gulp.run 执行任务；
通过 gulp.watch 监听文件变化；
通过 gulp.src 读取文件；
通过 gulp.dest 写完文件
Gulp 的优点：好用又不失灵活，既可以单独完成构建，也可以和其他工具搭配使用。
缺点：集成度不高，要写很多配置后才可以用，无法做到开箱即用。

模块打包构建工具

Webpack（推荐）
Webpack 是一个打包模块化的JavaScript的工具，在Webpack里一切文件皆模块，通过 loader 转换文件，通过Plugin 注入钩子，最后输出由多个模块组合成的文件。Webpack 专注于构建模块化项目。
一切文件，如JavaScript、CSS、SCSS、图片、模板，对于Webpack 来说都是一个个模块，这样的好处是能清晰地描绘各个模块之间的依赖关系，以方便Webpack进行组合和打包，经过Webpack的处理，最终会输出浏览器能使用的静态资源。
Rollup
Rollup 是一个和 Webpack 很类似但专注于ES6的模块打包工具。它的亮点在于，针对ES6源码进行 Tree Shaking,以去除那些已经被定义但没被使用的代码并进行 Scope Hoisting，以减少输出文件的大小和提升运行性能。然而 Rollup 的这些亮点随后就被 Webpack 模仿和实现了。由于 Rollup 的使用方法和 Webpakc 差不多，所以这里就不详细介绍如何使用 Rollup了，而是详细说明他们的差别：Rollup 是在Webpack 流行后出现的替代品；
Rollup 生态链不完善，体验还不如Webpack；
Rollup 的功能不如 Webpack 完善，但其配置和使用更简单；
Rollup 不支持 Code Spliting，但好处是在打包出来的代码中没有 Webpack 那段模块的加载、执行和缓存的代码。
Rollup 在用于打包JavaScript库时比 Webpack 更有优势，因为其打包出来的代码更小、更快。但他的功能不够完善，在很多场景下都找不到现成的解决方案。

自动构建与模块打包构建的关系

这两个构建工具功能上有重叠的地方，可单用，也可一起用，本质的区别没有那么清晰。
自动构建：强调的是前端开发的工作流程，我们可以通过配置一系列的task，定义task处理的事务（例如文件压缩合并、雪碧图、启动server、版本控制等），然后定义执行顺序，来让gulp执行这些task，从而构建项目的整个前端开发流程。简单说就一个Task Runner，就是用来跑一个一个任务的。
模块打包：是一个前端模块化方案，更侧重模块打包，解决的是你写代码时候如何组织代码结构的问题。我们可以把开发中的所有资源（图片、js文件、css文件等）都看成模块，通过loader（加载器）和plugins（插件）对资源进行处理，打包成符合生产环境部署的前端资源。

代码风格检查与代码规范

Prettier
Prettier 声称自己是一个“有态度”的代码格式化工具。它是唯一一个全自动的“风格指南”，也就是说，Prettier 提供的配置参数非常少，几乎所有代码风格都是固定的、不可调整的，你只能接受。这样做的好处是节省了在代码风格上争吵的时间。
官方网站：https://www.prettier.cn/
ESLint
ESLint用于检查JavaScript代码是否符合规则，由Nicholas C. Zakas在2013年创建。 ESLint中的规则是可更改的，并且可以自行定义和加载规则。 ESLint想要解决关于代码质量和代码风格的问题。 ESLint支持ECMAScript当前标准以及草案中用于未来标准的实验语法。
官方网站：https://cn.eslint.org/docs/user-guide/getting-started
Standard JS
是一个整理出目前JS 社群中所流行coding style 的Lint 工具，采直接固定规则（不须、也不可自行设定），并且能够自动修正不合规范的程式码。
官方网站：https://standardjs.com/readme-zhcn.html

2、应用程序测试

应用测试基础

单元测试：又称为模块测试，是针对程序模块（软件设计的最小单位）来进行正确性检验的测试工作。程序单元是应用的最小可测试部件。
集成测试：也叫组装测试或联合测试。在单元测试的基础上，将所有模块按照设计要求（如根据结构图）组装成为子系统或系统，进行集成测试。实践表明，一些模块虽然能够单独地工作，但并不能保证连接起来也能正常的工作。一些局部反映不出来的问题，在全局上很可能暴露出来。
功能测试：对产品的各功能进行验证，根据功能测试用例，逐项测试，检查产品是否达到用户要求的功能。

前端测试工具

Jest（主推）
Jest 是 Facebook 出品的一个测试框架，相对其他测试框架，其一大特点就是就是内置了常用的测试工具，比如自带断言、测试覆盖率工具，实现了开箱即用。
而作为一个面向前端的测试框架， Jest 可以利用其特有的快照测试功能，通过比对 UI 代码生成的快照文件，实现对 React 等常见框架的自动测试。
React Testing Library（推荐）
React Testing Library 是一个DOM 测试库，这意味着它并不会直接处理渲染的React 组件实例，而是处理DOM 元素以及它们在实际用户面前的行为。这是一个很棒的库，（相对）易于使用，并且鼓励良好的测试实践。当然，你也可以在没有Jest 的情况下使用它。
Cypress（推荐）
cypress是比较新的一个自动化测试工具，在github的star数目前已经是22k+，天然支持UI自动化，接口自动化的无缝融合，并且自带Mock Server，拥有独特的测试流水线实现方式，且上手简单，个人可以轻易搭建起企业级的前端自动化测试框架。
Enzyme （推荐）
Enzyme 是 React 的测试类库。 Enzyme 提供了一套简洁强大的 API，并通过 jQuery 风格的方式进行DOM 处理，开发体验十分友好。
mocha与chai
mocha是一个javascript的测试框架，chai是一个断言库，两者搭配使用更佳，所以合称“抹茶”（其实mocha是咖啡）。 “抹茶”特点是：简单，node和浏览器都可运行。
Ava
ava是mocha的替代品。虽然 JavaScript 是单线程，但在 Node.js 里由于其异步的特性使得 IO 可以并行。AVA 利用这个优点让你的测试可以并发执行，这对于 IO 繁重的测试特别有用。另外，测试文件可以在不同的进程里并行运行，让每一个测试文件可以获得更好的性能和独立的环境。在 Pageres 项目中从 Mocha切换到 AVA 让测试时间从 31 秒下降到 11 秒。
Jasmine
Jasmine是一个行为驱动测试框架，它提供测试JavaScript 的一系列工具。