Vue3源码学习之路-开发环境搭建

搭建Monorepo环境

Vue3中使用pnpm，workspace来实现monorepo（pnpm是快速、节省磁盘空间的包管理器，主要采用符号链接的方式管理模块。）

全局安装pnpm

npm install pnpm -g

初始化配置文件

pnpm init -y

配置monorepo

创建配置文件pnpm-workspace.yaml，意思是包都在packages文件夹内

packages:
  - 'packages/*'

创建packages文件夹，放置后续模块

npm配置

创建.npmrc文件，解决幽灵依赖问题，保持npm配置一致

shamefully-hoist = true

TS依赖安装

-w：workspace-root

pnpm install typescript minimist esbuild -w

打包配置

创建reactivity，shared文件夹，在其内部创建package.json，为构建做准备

reactivity/package.json

{
  "name": "@vue/reactivity",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "buildOptions": {
    "name": "VueReactivity",
    "formats": [
      "global",
      "cjs",
      "esm-bundler"
    ]
  }
}

shared/package.json

{
  "name": "@vue/shared",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "buildOptions": {
    "formats": [
      "cjs",
      "esm-bundler"
    ]
  }
}

创建模块文件

创建对应文件及目录：

• reactivity/src/index.ts
• shared/src/index.ts

shared/src/index.ts内写入一个简单方法

export const isFunction = function (fn) {
  return typeof fn === "function";
};

创建ts配置文件，ts.config.json

pnpm tsc --init

ts.config.json

{
  "compilerOptions": {
    "outDir": "dist", // 输出的目录
    "sourceMap": true, // 采用sourcemap
    "target": "es2016", //目标语法
    "module": "esnext", // 模块格式
    "moduleResolution": "node", //模块解析方式
    "strict": false, // 严格模式
    "resolveJsonModule": true, // 解析json模块
    "esModuleInterop": true, // 允许通过es6语法引入commonjs模块
    "jsx": "preserve", // jsx不转义
    "lib": ["ESNext", "DOM"], // 支持的类库
    "baseUrl": ".", // 当前路径
    "paths": {
      // 查找路径
      "@vue/*": ["packages/*/src"]
    }
  }
}

至此reactivity/src/index.ts内就可以引入我们的公共方法了

import { isFunction } from "@vue/shared";