Skip to content

Latest commit

 

History

History
95 lines (66 loc) · 2.27 KB

README.md

File metadata and controls

95 lines (66 loc) · 2.27 KB

这是我学习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.tssrc/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

yarn test

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