基础环境的搭建

mini-vue3的同步代码实现点击这里

mini-vue3的所有文章点击这里

在开始实现mini-vue3之前，需要先配置一下环境。本文主要会进行基础环境的搭建。

创建package.json文件

在命令行中执行 yarn init命令，然后跟着提示进行操作。最后就能生成package.json文件。

安装typescript以及生成ts.config.json文件

yarn add typescript --dev将typescript安装到dev环境中。 安装完typescript后，通过执行npx tsc --init生成ts.config.json文件。

安装jest环境

安装jest：yarn add --dev jest

使用babel：yarn add --dev babel-jest @babel/core @babel/preset-env

使用typescript：yarn add --dev @babel/preset-typescript @types/jest

在根目录下创建babel.config.js文件，进行babel的配置

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

测试环境搭建是否成功

在根目录下创建src文件夹，在该文件夹内创建index.spect.ts和index.ts文件

// index.spec.ts文件
import { sum } from './index

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

// index.ts文件
// 如果这里的参数类型报错，可以通过设置ts.config.js中的"noImplicitAny": false解决该问题
export function sum(x, y) {
    return x + y
}

执行yarn test，如果如下图所示：

证明基本环境搭建没有问题。