手撕mini |
您所在的位置：网站首页 › 源码库是什么意思 › 手撕mini |
手撕mini
|
mini-vue是一个很受欢迎的vue3源码的简易模型的源码库，很适合用来研究和学习vue3源码。 从今天开始我将深入学习其源码，从环境搭建开始，从零搭建自己的mini-vue仓库，深入理解vue3设计原理，同时也贯彻学习TDD（测试驱动开发）的开发思想。 我会把自己学习的过程记录下来，每当完成一段学习过程，我会将这部分源码形成一个独立的分支，同时搭配一篇博文。 手撕mini-vue系列文章代码仓库 本节代码对应分支：env-setup 该系列文章收录在我的mini-vue专栏这是我学习mini-vue源码的第一篇博文：手撕mini-vue源码——环境搭建 由于项目源码使用ts编写，同时我们基于测试驱动开发的思想需要用到jest，所以本节的环境搭建主要就是搭建ts和jest相关环境。 本节任务清单： 搭建ts环境 搭建jest环境 编写一个初始的测试用例代码，目的是为了证明我们的环境没问题 编写测试用例依赖的函数代码 跑通测试用例 项目初始化 yarn init -y 复制代码先来看看这一节最终的目录结构： 最后一行命令会生成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.ts和src/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 测试用例跑通，本节任务完成。 |
【本文地址】