vue3源码学习(一）环境搭建

首先要创建根目录

mkdir vue3-source

cd vue3-source

pnpm init

创建子包的话，要从根目录中创建对子包的依赖关系。

如果要让 pnpm 知道它管理的子包，我们要在根项目也就是当前的根目录中添加一个 pnpm-workspace.yaml 文件

packages:
  - "packages/*"

这样就向 pnpm 表明，packages 目录下放的是子包

初始化 ts 环境

pnpm install typescript -w

-w 表示的是在根目录安装包 如果不加的话 它会提醒你

执行这个命令得先安装typescript

npx tsc --init

生成 tsconfig.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"], // 支持的类库 esnext及dom
    "baseUrl": ".",
    "paths": {
      "@vue/*": ["packages/*/src"] // 表示找包的时候找的是packages目录下的src
    }
  }
}

打包

在根目录的 package.json 下

{
  ...
  "scripts": {
    "dev": "node scripts/dev.js"
  },
  ...
}

scripts/dev.js就是打包的文件

安装

pnpm install esbuild minimist -w

• esbuild 用来打包的
• minimist 是用来解析命令行参数的

import esbuild from "esbuild";
import minimist from "minimist";
import { resolve, dirname } from "node:path";
import { fileURLToPath } from "node:url";

// import.meta.url; 当前文件在电脑中的绝对路径
// 解析成node路径 去掉了file://
const __dirname = dirname(fileURLToPath(import.meta.url));
const args = minimist(process.argv.slice(2));
const target = args._[0] || "reactivity";
const format = args.f || "iife";

const outfile = resolve(__dirname, `../packages/${target}/dist/${target}.js`);

esbuild
  .context({
    entryPoints: [resolve(__dirname, `../packages/${target}/src/index.ts`)], // 入口
    outfile, // 输出路径
    bundle: true,
    sourcemap: true,
    format, // 格式化
  })
  .then((ctx) => ctx.watch());

创建目录 reactivity,shared

mkdir reactivity
cd reactivity
pnpm init

mkdir shared
cd shared
pnpm init

一个包怎么用另一个包? reactivity 想用 shared 包

我可以在 reactivity/package.json 中添加如下代码

{
  ...
   "dependencies": {
    "@vue/shared": "workspace:*"
  }
}

这就表示了我依赖的包是当前工作目录下的@vue/shared,而不是 vue 的那个官方包

然后再装包

pnpm install

但是这样太麻烦 需要两步 想要一步的方法

pnpm install @vue/shared@workspace --filter reactivity

• @workspace：包后面添加@workspace 就表示当前根目录下的子包
• --filter：表示我要安装到 reactivity 这个包中

到这里一个简单的环境就搭建成功了，明天开始学习响应式