Vue3源码实现(一)——搭建环境,集成jest、ts

90 阅读1分钟

初始化项目

npm init -y

创建src目录

iShot_2022-09-02_23.37.11.png

生成 ts-config.json 文件

npm install typescript --dev
npx tsc --init

试着写一个测试内容

// index.spec.ts
it('test', () => {
  expect(true).toBe(true)
})

这个时候因为还没安装jest,所以index.spec.ts是会报红的。

所以接下来安装jest

npm install jest --save-dev 
npm i @types/jest --save-dev   

package.json 添加命令

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

终端输入 npm run test,查看结果,如果pass,则说明测试通过。

支持es6语法

src/index.ts试着写一个函数导出

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

src/tests/index.spec.ts引入使用

import { add } from '../index'

it('test', () => {
  expect(true).toBe(true)
  expect(add(1, 2)).toBe(3)
})

终端再次输入npm run test,发现出现问题,原因是没有支持es6语法,需要引入babel来解决这个问题。

npm install --save-dev babel-jest @babel/core @babel/preset-env
npm install --save-dev @babel/preset-typescript

配置babel.config.js

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

再次 npm run jestnpx jest iShot_2022-09-03_00.06.19.png

故意写错

expect(add(1, 2)).toBe(4)

iShot_2022-09-03_00.07.33.png

以上就是初始化环境的内容。

下一次更新的内容是:实现 effect & reactive & 依赖收集 & 触发依赖。

生命不息 奋斗不止