mini-vue是一个很受欢迎的vue3源码的简易模型的源码库，很适合用来研究和学习vue3源码。

从今天开始我将深入学习其源码，从环境搭建开始，从零搭建自己的mini-vue仓库，深入理解vue3设计原理，同时也贯彻学习TDD（测试驱动开发）的开发思想。

我会把自己学习的过程记录下来，每当完成一段学习过程，我会将这部分源码形成一个独立的分支，同时搭配一篇博文。

• 手撕mini-vue系列文章代码仓库
• 本节代码对应分支：env-setup
• 该系列文章收录在我的mini-vue专栏

这是我学习mini-vue源码的第一篇博文：手撕mini-vue源码——环境搭建

由于项目源码使用ts编写，同时我们基于测试驱动开发的思想需要用到jest，所以本节的环境搭建主要就是搭建ts和jest相关环境。

本节任务清单：

• 搭建ts环境
• 搭建jest环境
• 编写一个初始的测试用例代码，目的是为了证明我们的环境没问题
• 编写测试用例依赖的函数代码
• 跑通测试用例

项目初始化

yarn init -y

先来看看这一节最终的目录结构：

TypeScript环境搭建

yarn add typescript --dev
npx tsc --init

最后一行命令会生成tsconfig.json，这个文件我们做下面两处修改，分别用来支持jest类型以及关闭ts的any校验，因为我们的初衷是为了学原理，有时可能会临时写一些any，这个时候类型不是那么重要。

"types": ["jest"], 
"noImplicitAny": false,

jest环境搭建

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

第一行依赖是jest源码和其ts类型。第二行babel相关是为了使原本只支持CommonJs规范的jest代码可以使用ESModule规范用import来导入代码。要同时使用babel和ts还需要第三行的依赖。这些在jest官网里都有。

新建babel.config.js

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

然后我们在package.json中新增一条test命令：

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

运行单测

新建src/reactivity/index.ts和src/reactivity/__tests__/index.spec.ts，分别键入以下代码：

// index.spec.ts
import { sum } from '../index'

it('sum', () => {
  expect(sum(1, 1)).toBe(2)
})

// index.ts
export function sum(a, b) {
  return a + b
}

运行测试命令yarn test

测试用例跑通，本节任务完成。