1、带你一步步实现vue3源码之环境搭建！

Swimly
327 阅读4分钟

打包环境

在开始我们的项目之前，首先要做的当然是搭建开发环境，下面，我们先来了解我们需要哪些功能，然后根据对应的功能来配置环境。

  • node环境，这个是必须的，现在也没有几个项目说没用到nodejs了。
  • jest测试，为了写出更严谨的代码，单元测试可以说是必须的了。
  • typescript，相信现在都可以熟练掌握ts了，用它来写代码实在太爽了。

在这里，我们就省略node的安装了，默认已经安装好node环境，并且安装好了包管理npm、cnpm或者yarn了。

下面，我们就一起一步步来创建我们的项目结构

初始化项目

通过yarn初始化node项目，自动生成package.json文件。

yarn init -y

这时候，我们的项目目录除了package.json，还啥都没有，接下来，我们就来规定一下我们的目录结构。

目录结构

我们约定所有的项目代码都放在src目录下，然后根据不同的模块分为reactivity，runtime-core，runtime-dom等等，每个模块里面都有一个tests目录，用来存放该模块下的测试用例。

  • src
    • reactivity
      • tests
        • index.spec.ts
      • index.ts
      • ...
    • ...
  • package.json

测试用例

为了测试我们的环境，首先编写一个简单的测试用例

//src/ractivity/tests/index.spec.ts
describe("init", () => {
  expect(true).toBe(true)
})

01.png

好巧不巧，写完之后这个测试文件会报错，因为我们的项目压根都还没配置typescript，而我们已经开始用ts文件来编写测试用例了。

集成typescript

首先，在我们的项目下安装typescript，安装到dev环境即可

cnpm i -D typescript

现在，我们就可以在项目根目录下执行tsc命令

npx tsc --init

这里，可能有人会问，npx是什么，这个可以自行百度，这里简单说下，就是为了让我们在项目根目录下执行tsc命令的时候不会找不到该命令。

如果实在搞不明白，这里也可以全局安装一下cnpm i -g typescript，然后执行tsc --init，二者效果是一样的。

这时候会给我们生成一个tsconfig.json，我们可以清理一下里面的注释，因为看起来太乱了。

// tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

上面就是默认给我们创建的ts配置文件。

安装Jest

有了ts的支持，下面，我们继续集成jest开发环境

cnpm i -D jest @types/jest

安装完后，我们上面写的单测依然报错，下面我们修改一下tsconfig.json文件。

{
  ...,
  "types": ["jest"]
}

修改完之后，我们的报错就解决了。

执行测试

配置好测试环境以及typescript环境后，我们再来给package.json添加一个scripts。

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

当我们执行yarn test之后，可以看到命令行显示测试通过，这里只是一个很简单的测试用例，如果我们需要在测试文件中引入其他模块呢？

支持Es6模块导入

接下来，按照我们项目的要求，先简单编写一个模块并导出，最后在测试文件中导入，看能不能通过测试

// src/reactivity/index.ts
export function add (a, b) {
  return a + b
}

?> 注意：这时候vscode会报错，只需要给tsconfig.json添加"noImplicitAny": false即可

// src/reactivity/tests/index.spec.ts
import {add} from '../index'
it("init", () => {
  expect(add(1, 1)).toBe(2)
})

不出意外，当我们再次执行yarn test会直接报错。

02.png

因为jest默认的运行环境是nodejs，而node是commonjs规范，上面我们模块的导出和引入却用的是esm规范，所以，我们需要将它进行转换。

babel配置

jest官方文档便有babel的配置方法, www.jestjs.cn/docs/gettin…

首先，按照上面的介绍安装所需依赖

cnpm i -D babel-jest @babel/core @babel/preset-env @babel/preset-typescript

创建并配置bebel

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

到这里，jest测试环境就搭建好了，接下来，还要解决项目打包问题，这里我们采用rollup对我们的项目进行打包。

?> 分析：为什么会采用rollup，而不是webpack或者其他的打包工具，这里不做过多讲解，记住一句，rollup适合用来打包库，它默认支持TreeShaking，打包出来的代码很简洁，而且有丰富的plugins供使用。

rollup集成

首先，安装rollup依赖，它支持命令行和api两种调用形式，这里，我们就用命令行来对项目进行打包

cnpm i -D rollup @rollup/plugin-typescript tslib

并且创建一个配置文件rollup.config.js

import typescript from '@rollup/plugin-typescript'
export default {
  input: './src/index.ts',  //入口
  output: [{
    file: 'dist/index.cjs.js',
    format: 'cjs'
  }, {
    file: 'dist/index.esm.js',
    format: 'es'
  }],
  plugins: [
    typescript()
  ]
}

添加scripts

//package.json
"scripts": {
  ...,
  "dev": "rollup -wc"
}

修改tsconfig.json，将module的值改成esnext，当我们执行yarn dev的时候就能成功打包了。

总结

这一节，我们通过jest，typescript，rollup配置好了项目开发环境的测试以及代码打包，接下来，我们就可以一步步类实现我们的项目代码。

下一节，我们将一起来了解vue3最核心的reactive响应式对象。

avatar
文章
阅读
粉丝