构建工具

构建工具其实是工程化、自动化思想在前端的提现

将一系列流程用代码区实现，让代码自动化的执行这一系列复杂的流程

构建工具分类

• 基于任务运行的工具 Grunt Gulp
• 基于模块化的工具 webpack rollup
• 整合型工具 yeoman weflow

Grunt Gulp

Gulp

基于task驱动

webpack

tapable 订阅 事件流 call apply

基于webpack改进的构建工具

rollup

• 兼容浏览器和node

• 相对webpack更加轻量

• 配置相对简单

使用场景：JS库开发 而非业务开发

特点

• 使用ES6标准格式打包代码
• 直达包js打包速度快 生成体积小

不适用场景

• 不支持code spliting
• 针对静态资源处理 复杂模块化

export default{
    input:'src/main.js',
    output:{
        file:'bundle.js',
        format:'cjs',
    }
}

流程： esm代码 => rollup通过入口 递归识别esm代码 => 最终打包一个或者多个 bundle.js => 浏览器直接可以支持引入 <script type="module" />

打包产物 esm cjs umd amd

esbuild

使用go开发(编译语言，编译时就已经转化了，所以执行时会比较快)

支持多线程

webpack会运行时不断的转义 string => AST => AST => string

esbuild 共用相似AST结构

基于 ES Module 的bundleless 构建工具

bundleless

搭建vue开发环境

yarn add -D vue-template-compiler@2.6.14 vue-loader@15.9.8

vue-template-compiler 模板编译 vue-loader 解析.vue文件

webpack 优化

• 编译进度条
• 查看包内容

优化打包速度

• webpack升级到5

• 缩小文件的搜索范围 include exclude alias extensions

• 缓存 cache(5中不需要，有缓存优化和缓存算法的升级) cache-loader (×) dll (×)

• 多进程 thread-loader

优化打包文件体积

• externals (CDN)

• JS压缩 TerserWebpackPlugin tree-shaking

• CSS压缩 css-minimizer-webpack-plugin

• splitChunk

• import

前端测试

• 常见的前端测试

• jest\pippeteer\cypress

• 单元测试jest

• E2E测试

什么是测试

• 便于重构
• 可维护性
• 提高代码质量
• 可靠性

什么时候写测试

• 开源包
• 业务底层 npm 包

测试类型和框架

按照是否看代码：黑盒测试 白盒测试

按照开发阶段：单元测试 集成测试

E2E测试

测试框架： jest puppeteer cypress Mocha

单元测试

模块测试 针对模块来进行正确性检验的测试工作 对一个函数 一个组件 或者一个类 颗粒度小

前端为什么需要单元测试

• 必要性
• 正确性：验证代码正确性
• 自动化
• 保证重构

jest

• .not 修饰符 允许你测试用例不等于某个值的情况
• .toEqual 递归检查所有属性和属性值是否相等，常用来监测引用类型
• .toHaveLength 字符串或者数组长度是否满足预期
• .toMatch 传入一个正则表达式 对字符串类型正则匹配
• 测试异步函数

安装 jest @types/jest(语法提示),jest会运行文件夹下所有的.test文件

package.json文件中可以添加配置用以启动：

{
  "scripts": {
    "test": "jest --watchAll"
  },
}

建立一个 jest.config.js ,并填充：

module.exports = {
    // 是否显示覆盖率报告
    collectCoverage: true,
    collectCoverageFrom: ['src/**/*'],
    coverageThreshold: {
        global: {
            statements: 90,
            funcitons: 90,
            branches: 90,
        }
    }
}

node兼容ES6

如果在本地用node测试jest，想使用ES6语法的时候，可以安装插件：

• @babel/core执行转译工作的引擎
• @babel/preset-env支持将 ES6+ 代码转译为 ES5 代码的预处理
• 并建立一个 .babelrc 文件，填充：

{
    "presets": [
        "@babel/preset-env",
    ]
}

如果想要进一步支持ts语法可以npm@babel/preset-typescript并在上述文件中配置：

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-typescript"
    ]
}

E2E测试

端到端的一个测试

puppeteer

利用能力进行测试，是一个node库，是chrome官方团队提供的

chromium

自动化：创建浏览器 打开页面 开始默认截图 模拟用户输入 登陆成功 截图

puppeteer

• 生成页面快照 图片 pdf
• 抓取SPA页面内容
• 抓取网站你需要的内容
• 自动化表单提交
• 创建自动化测试环境
• 抓取应用的性能数据 chrome performance timeline
• 测试 chrome 程序