【mini-vue3】初始化项目

从今天起将使用 TDD 的思想从 0 开始搭建一个 mini-vue3，在包含了 vue3 的核心内容的同时去除了 vue3 繁杂的边界判断。既是作为自己的学习记录笔记，也能够让初学者更好地了解 vue3，以便进一步阅读 vue3 源码。

项目初始化

yarn init -y

搭建开发测试环境

该项目使用 TS 进行编写，使用 jest 进行测试，因此需要先搭建 TS 环境和 jest 环境

编写测试代码

index.spec.ts

it('init', () => {
    exprct(true).toBe(true)
})

会发现报了如下错误

原因是没有将 TS 集成进来

yarn add typescript --dev

npx tsc --init

yarn add jest @types/jest --dev

执行以上命令，安装 typescript 和 jest 并生成 tsconfig.json 文件

执行完以上命令之后，修改 tsconfig.json 中的配置，使其支持 jest

修改完成之后，回到 index.spec.ts 文件，会发现它已经不报错了

在 package.json 中添加 scripts

然后执行测试指令，会发现测试通过了，已经成功集成了 TS 和 jest 环境

yarn test

测试 esm 模块

index.ts

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

index.spec.ts

import { add } from '../index'

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

执行测试命令，会发现如下报错，原因是 jest 是运行在 node 环境的，node 环境默认的规范是 cjs 规范，因此需要使用 babel 来进行转换

配置 babel

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

yarn add --dev @babel/preset-typescript

在根目录下创建 babel.config.js

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

再次执行测试指令，会发现测试用例通过了

至此，项目的初始化环境搭建和测试环境的集成就已经完成了，可以开始编写代码了