【源码瘦身】Vue3 - 项目准备想了解框架原理？想自己实现框架？想阅读源码却发现过于复杂无从下手？【源码瘦身】系列致

想了解框架原理？想自己实现框架？想阅读源码却发现过于复杂无从下手？

【源码瘦身】系列致力于将处理边缘情况和实现进阶功能的代码除外，抽取核心代码，实现可用的主要功能。在这个过程中，你能够了解框架的实现原理、学习项目的编码技巧、实现自己的简化框架。

环境准备

项目搭建

创建目录 corex-vue3，进入目录，打开终端。

生成 package.json：

npm init -y

项目和框架保持一致，使用 TypeScript 编写：

pnpm add -D typescript

项目采用 TDD（测试驱动开发），使用 Jest 进行单元测试：

pnpm add -D jest @types/jest ts-jest

自动生成 jest.config.js：

pnpm ts-jest config:init

创建 tsconfig.json 文件：

{
  "compilerOptions": {
  "target": "ES6",
  "module": "ESNext",
  "lib": ["ESNext", "DOM"],
  "types": ["jest"],
  "moduleResolution": "node",
  "strict": true,
  "noImplicitAny": false,
  "removeComments": true,
  "esModuleInterop": true
  }
}

简单测试

创建源文件 index.ts：

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

创建测试文件 index.spec.ts：

import { sum } from '.';

test('sum', () => {
  expect(sum(1, 2)).toBe(3);
});

修改 package.json，添加测试命令：

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

命令行执行 pnpm test 查看测试结果，控制台应输出如下内容：