前言

【手写Vue3】系列，会从零开始，一步步的实现vue3的基本功能，最后做到掌握vue3的实现原理，了解vue3的设计思想，提升自己的coding能力。

本文是该系列的第一篇，主要是从零开始先搭建一套代码环境。

确保电脑里面已经安装了nodejs，yarn等基础工具

初始化项目

首先，我们找到一个自己喜欢的文件夹，新建一个项目文件夹，这个文件夹就是以后vue3源码的诞生之地，我的文件夹是imit-vue。

接着，我们运行命令：npm init -y初始化package.json。

现在，我们在根目录下（也就是imit-vue下），创建一个src目录，以后的源码都会放在这个目录下，由于我下期准备写的是reactivity的源码（也就是响应式的源码），所以我们在src下创建一个reactivity的文件夹，此时，目录结构如下：

接着，我们在reactivity目录下，创建index.ts文件，表示reactivity的主入口文件。

因为我们使用的是ts，所以我们还需要配置一下ts环境。

安装依赖：

yarn add typescript --dev

接着，我们初始化tsconfig：

npx tsc --init

这个时候，我们的根目录下就自动生成了tsconfig.json的配置文件。

由于我们是要写一个高仿的vue3的库，所以单测是必不可少的，因此我们需要安装jest及其相关依赖：

yarn add jest @types/jest --dev

现在，我们测试一下jest，在reactivity目录下新增文件夹__tests__，再在__tests__中增加index.spec.ts文件，里面输入简单的自测用例：

it('test', () => {
    expect(1).toBe(1);
});

然后，我们修改package.json中的scripts：

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

运行命令：npm run test，发现用例成功跑起来了：

因为jest是跑在node中的，而node是使用的CommonJS，所以我们需要把它转换成esmodule。首先，我们先测试一下使用esmodule的语法是否支持，在reactivity下的index.ts增加以下内容：

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

这个时候，会报错（当然也可以不理会），因为形参隐式具备any转换，所以我们可以修改一下tsconfig.json：

"noImplicitAny": false

这个时候，报错就消失了（如果还报错，那就重启ts服务器）。

现在，修改测试用例：

import { add } from '../index';
it('init', () => {
    expect(add(1,2)).toBe(3);
});

这个时候，我们运行npm run test，发现报错了：

这个报错的原因，就是node环境没法使用import，所以我们需要增加babel去转换。

查阅jest文档，发现说的已经很清楚了，我们安装一下依赖：

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

接着，我们增加babel.config.js：

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

由于我们还需要支持ts，所以我们再安装需要的依赖：

yarn add --dev @babel/preset-typescript

接着，我们修改babel.config.js：

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

现在，再试试跑测试用例，发现测试用例跑成功了。

那么，我们最基础的环境就搭建好了。