现代 Javascript 库开发

想法 => 目标 => 设计 => 编码

源代码 勘误

一些注意事项

rollup 版本: 书中是 0.57.1，项目目前使用的是最新的 3.20.6, 有问题再切换回去(切换回去了)

踩坑

似乎 rollup(不注明，都是以0.57.1版本为例) 打包，只能从esmodule转向其他包，commonjs 不能转化为 esmodule 遇到错误：

Cannot find module '@babel/preset-plugin-transform-runtime' from If you want to resolve "@babel/plugin-transform-runtime", use "module:@babel/plugin-transform-runtime"

• Did you accidentally pass a preset as a plugin?

用npm 下载包有错误提示

rollup@">=0.60.0 <1" from [email protected] 升级 rollup 版本至 0.60.7

原来是将plugin放在了preset 中导致的 把 rollup 改回去

又报错

Error: 'default' is not exported by node_modules/.pnpm/@[email protected]/node_modules/@babel/runtime-corejs2/core-js/array/from.js 解决方案1: @rollup/plugin-commonjs，但当前rollup版本不支持（要求 1.20.0） 打包报错Error: ‘default‘ is not exported 解决方案2: rollup-plugin-commonjs rollup-plugin-node-resolve（rollup@">=0.60.0 <1"） rollup从入门到打包一个按需加载的组件库 使用rollup打包JS的方法步骤 rollup 提供了插件rollup-plugin-commonjs ，以便于在 rollup 中引用 commonjs 规范的包。该插件的作用是将 commonjs 模块转成 es6 模块。 rollup-plugin-commonjs 通常与 rollup-plugin-node-resolve 一同使用，后者用来解析依赖的模块路径。 format: 'umd' 的模式下才需要

测试

兼顾测试覆盖率和效率 控制变量法，按照参数分组，对于每个参数，分别设置正确的参数、错误的参数以及边界值，对于其他的参数，而对于其他的参数给一个正确的固定值即可，保证其他参数影响本参数的测试 对于同一个类型的输入，只需要设计一个用例即可

方法差异

equal: 全等 eql: 值相等（深拷贝适合用这个来比较）

单元测试覆盖率

基于 Istanbul (npm 包叫 nyc) 来做单元测试覆盖率

语句覆盖率 Statement Coverage

分支覆盖率 Branch Coverage

函数覆盖率 Function Coverage

行覆盖率 Line Coverage

源代码覆盖率

打包后的代码有一些构建工具生成的代码 原理：先向源代码中插入测试代码覆盖率的代码，再调用 Babel 进行构建，将构建好的代码传递给 Mocha 进行测试，这样就得到了源代码的测试覆盖率

pnpm i @babel/[email protected] [email protected] [email protected] -D

踩坑

ReferenceError: window is not defined

解决：node.js - mocha 命令给出 ReferenceError : window is not defined

npm install --save-dev --save-exact jsdom jsdom-global 然后将 -r jsdom-global/register 添加到你的 mocha 命令行。当您重新运行测试时，window is not defined 错误将消失。

Cannot use import statement outside a module

.nycrc 中增加配置 解决 mocha 测试时 cannot use import statement outside a module 错误，以及配置 travis

"require": [
  "@babel/register"
]

警告

rollup-plugin-babel 4.0.3 └── ✕ unmet peer rollup@">=0.60.0 <1": found 0.57.1 把rollup升级到 0.57.1 => 0.60.7

测试覆盖率都为0

// window.xx = Array.from('abc') // ['a', 'b', 'c']

上面代码屏蔽的情况下，代码测试覆盖率都为 0, 放开后就正常了

export function clone(source) {
  // ...
}

导出就正常了，。。。。。。奇葩

export const clone = (source) => {
  // ...
}

这种也不行 export default clone 和 export function clone 缺失测试覆盖率就为0了

Puppeteer

用 Puppeteer 来自动化测试户 Puppeteer使用指南 - 在 Node.js 下模拟浏览器 自研前端性能监控平台之 Puppeteer 篇 自研前端性能监控平台之 Lighthouse 篇 自研前端性能监控平台之 Lighthouse 定制篇 puppeteer docs puppeteer github