背景

本文记录笔者搭建 mini-vue3 项目的过程，中间涉及git，yarn，jest, typescript等知识。

关联远程库

新建远程库

笔者在 github 远程库上新建了1个项目 mini-vue3，配置：

Node 的 .gitignore规范
MIT 的 License 协议

新建完成后，项目自动产生 1 次 commit：

克隆到本地

通过 git clone 命令克隆远程库到本地库：

git clone git@github.com:ronnycyy/mini-vue3.git

初始化 npm 项目

笔者选择 yarn 来管理项目，因为 yarn 在笔者的网络环境下比 npm 下载包的速度要快。

yarn init -y

格式化提交信息

优雅的 commit 信息能更好地维护项目，社区有很多 commit message 的规范实现，但是笔者了解到 Angular规范比较合理和系统化，并且有配套的工具。所以笔者使用了 Angular规范 ，预期效果如下图：

启用 commit 规范的步骤

首先，全局安装 commitizen:

npm install -g commitizen

然后，在项目目录里，运行下面的命令，使其支持 Angular 的 Commit message 格式。

commitizen init cz-conventional-changelog --yarn --dev --exact

以后凡是用到git commit命令的时候，一律改为使用git cz。

// 将已变更文件从`工作区`添加到`暂存区`
git add <file_name>
// 交互式输入格式化的 commit message，然后提交到`本地库`
git cz

执行 git cz 以后会出现一个交互式界面，用来生成符合格式的commit message。

推送到远程库

通过 git push 推送更新到远程库，远程库即可收到格式化的 commit 信息，笔者已提交了多个 commit，效果如下：

搭建单元测试环境

本项目要通过单元测试来驱动开发，所以要先搭建好单元测试环境，测试框架用的是 jest。

初始化目录

初始化目录如下，src 放置模拟出的 vue 源码的各个模块，如 reactivity 模块，tests 放置 jest 的单元测试文件。

mini-vue3
-- src                      # 放置模拟出的 vue 源码的各个模块
   -- reactivity             # 模拟 reactivity 模块
      -- index.ts             # reactivity 模块出口文件，待测试，以测试驱动开发
      -- tests                # 放置单元测试文件
         -- index.spec.ts      # 测试 src/reactivity/index.ts 的文件

初始化 TypeScript 环境

本项目高度模拟 vue3 源码，所以使用 TypeScript 语言进行开发。

安装

安装 TypeScript 到 开发环境:

yarn add typescript --dev

初始化配置

通过 tsc 命令初始化 TypeScript 配置，这会生成一份默认的 tsconfig.json 文件。

npx tsc --init

初始化 jest 环境

安装

由于项目使用了 TypeScript，所以安装 jest 到开发环境的的时候，要一并安装 jest 的类型 @types/jest:

yarn add jest @types/jest --dev

在全局作用域中添加 jest 的 typescript 类型

笔者想在全局作用域下使用 jest 的 API，比如在 src/reactivity/tests/index.spec.ts 中不引入模块，直接写：

it("init", () => {
  expect(true).toBe(true)
})

但是在刚刚初始化的 TypeScript 项目中这样写会报错：找不到这些 API，这是因为 jest 的类型没有暴露到全局作用域。

要实现这个功能，需要在 src/tsconfig.json 中把 jest 配置到 compilerOptions.types里：

{
  "compilerOptions": {
    "types": ["jest"]
  }
}

定义测试脚本

在 src/package.json 中定义启动测试的脚本：

{
  "script": {
    "test": "jest"
  }
}

这样就能通过 yarn test 启动 jest，从而执行测试了，效果如下：

启用 ESM 模块规范

项目采用 ESM规范 来管理模块的导入导出，而 jest 运行的环境是 nodejs 环境，nodejs 提供的模块规范是 commonjs，这样就有矛盾，需要转换一下。

安装依赖

笔者通过 babel 来转换，首先安装一下 babel 以及让 babel支持jest所需的依赖、让babel支持typescript所需的依赖，具体可参考 jest官网以及 babel官网。

yarn add babel-jest @babel/core @babel/preset-env @babel/preset-typescript --dev

提供配置

创建 babel.config.js文件(和 package.json 同级)，提供配置项:

以当前 Node 版本为基础，把 CommonJs 转换成 ESM。
支持 TypeScript 语法。

module.exports = {
  presets: [
    ['@babel/preset-env', { targets: { node: 'current' } }],
    '@babel/preset-typescript',
  ],
};

检验

下面通过一个简单的测试用例，测试一下 ESM 是否生效。

首先在 src/reactivity/index.ts 中通过 export 导出一个 add 函数：

export function add(a:number, b:number): number {
  return a + b;
}

在 src/reactivity/tests/index.spec.ts 测试文件中导入 add 函数，执行 add(1,1)，如果能输出2，说明 ESM 生效了：

import { add } from '../index'
it('esm', () => {
  expect(add(1,1)).toBe(2)
})

执行 yarn test，效果如下，esm这一项测试用例通过✅，说明配置生效，ESM规范已经可以用了🎉。

完成

至此，初始化项目+搭建单元测试环境完成🎉。

接下来可以开开心心地写单元测试，并以测试为驱动模拟vue3源码了。

查看完整代码

笔者完成本文所述步骤后，得到的代码保存在一次 commit 中，可以在笔者的 github 主页上查看：mini-vue3 环境搭建完成。

「mini-vue3」初始化项目 + 搭建单元测试环境

背景