本文章依据阅读源码的理解进行编写。如果有什么错误的地方,欢迎指正交流学习。
最近也在帮助想入行前端的朋友进行学习,如果有需要交流学习,可以添加微信 gdgzyw。
聊天、学习、打游戏都阔以~
学习源码最快的方式就是理解概念后,自己写一个简版的功能。所以我们得先搭一个环境,这里采用测试驱动的方式进行。
初始化项目
初始化 package.json
和安装依赖
yarn init -y
yarn add -D @babel/core @babel/preset-env @babel/preset-typescript @types/jest babel-jest jest
添加 scripts
用于启动 jest
package.json
{
// ...
"scripts": {
"test": "jest"
},
// ...
}
根目录创建 babel.config.js
module.exports = {
presets: [['@babel/preset-env', {
targets: {
node: 'current' } }], '@babel/preset-typescript'],
}
创建 tsconfig.json
文件
{
"compilerOptions": {
"target": "es2016",
"lib": [
"DOM",
"es6"
],
"module": "commonjs",
"types": [
"jest"
],
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"noImplicitAny": false,
"skipLibCheck": true
}
}
至此我们的项目就初始化完成了。如果你需要用 git 来管理,可以自行 git init
。
编写测试用例
创建 src/reactivity/tests/effect.spec.ts
文件
des