基于 TDD 思想实现 mini-vue3

TDD 现在是社区很火的一种开发方式。测试驱动开发（Test-Driven Development）的英文简称，是敏捷开发中的一项核心实践和技术，也是一种设计方法论。TDD 的原理是在开发功能代码之前，先编写单元测试用例代码，测试代码确定需要编写什么产品代码。

实现最简 vue3 模型，用于深入学习 vue3， 更轻松的理解 vue3 的核心逻辑

github 源码

准备工作

  • 新建空目录，控制台执行npm init -y初始化 package 配置文件

  • 根目录下新建src文件夹用来存储项目代码

  • 安装typescipt 控制台执行pnpm install typescript命令

  • 控制执行npx tsc --init生成tsconfig.json配置文件

  • 配置单元测试jest

    1. 控制台执行pnpm install jest @types/jest
    2. tsconfig.json 中找到types字段并添加["jest"]
    3. tsconfig.json 中找到noImplicitAny设为flase (关闭 ts 的 any 类型检测)
    4. tsconfig.json中找到lib字段添加["DOM","es6"]
    5. package.json中找到scripts字段添加单元测试脚本命令{"test":"jest"}，执行该脚本会找到项目里以spes.[ts|js]的单测文件并执行。
    6. jest运行在node环境下默认的模块规范是commonJS，想使用esm规范需要使用babel来进行转译
    • 安装babel，控制台执行pnpm install babel-jest @babel/core @babel/preset-env @babel/preset-typescript
    • 根目录下新建babel.config.js文件，内容如下
    1
    2
    3
    4
    5
    //babel.config.js
    module.exports = {
      //基于当前node版本为基础进行转换
      presets: [['@babel/preset-env', { targets: { node: 'current' } }], '@babel/preset-typescript']
    }
    1. 项目目录如下
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    ├─babel.config.js
    ├─package.json
    ├─rollup.config.js
    ├─tsconfig.json
    ├─yarn.lock
    ├─src
    |  ├─index.ts 入口文件
    |  ├─shared 通用函数封装
    |  ├─runtime-dom 运行时处理dom
    |  |  ├─__test__ 存放单测文件
    |  ├─runtime-core 运行时
    |  |  ├─__test__ 存放单测文件
    |  ├─reactivity 响应式相关
    |  |  ├─__test__ 存放单测文件
    ├─lib 构建之后存放
    ├─example html示例