Vue3 源码解析-pnpm 开发环境的搭建pnpm

Viewwei 2023-10-15 原文

前言

Vue3源码的开发环境使用的是pmpm环境,在搭建开发环境之前需要先安装pnpm.推荐使用node来安装 pnpm

npm install -g pnpm

源码的开发环境的搭建

初始化项目

在本地新建项目目录,在该目录下使用pnpm对项目初始化.

pnpm init

然后在根目录下新建pnpm-workspace.yaml文件,用于告诉pnpm需要打包的路径,例如下面代码所示,表示 pnpm 打包的文件的位置在根目录下的 packages 下

packages:
  - 'packages/*'

安装依赖

开发环境需要依赖三个包,分别是 typescript用于支持 ts,minimist 用于来解析打包指令的参数,开发环境使用 esbuild

pnpm install typescript minimist esbuild -w -d

在开发的时候需要对 ts 进行配置,需要生成 ts 的配置文件(tsconfig.json)

pnpm tsc --init

在 tsconfig.json的文件中需要添加如下配置

{
  "compilerOptions": {
    "outDir": "dist",
    "sourceMap": true,
    "target": "es2016",
    "module": "esnext",
    "moduleResolution": "node",
    "strict": false,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "jsx": "preserve",
    "lib": ["esnext","dom"],
    "baseUrl": ".", // 引入包的路径,表示从当前路径开始引入
    "paths": {
      "@vue/*":["packages/*/src"] //所有引入的格式 比如 引入 @vue/reactivity, 需要从 packages/reactivity/src中引入
    }
  }
}

Vue 包的创建

Vue3通过包的形式对各个功能进行封装,比如 reactivity 包主要作用是代理,shared 包是提供功能函数.现在先创建 reactivity 和 shared 文件,结构如下

image.png

然后进入 reactivity 目录,pnpm 项目,生成 package.json文件,然后修改 package.json文件.

{
  "name": "@vue/reactivity", //项目的名称
  "version": "1.0.0",

  "description": "",
  "main": "index.js",
  "buildOptions":{ //自定义属性
    "name":"VueReactivity", //打包的名称,
    "formats":[ //打包的格式
      "global", //浏览器中使用
      "cjs",
      "esm-boundler"
    ]
  }
}

同样的方式在 shared 文件中初始化 shared 项目,但是 package.json有一点不一样,因为 shared 作为一个引入对象,不需要再浏览器中使用,所以不需要打包成global

{
  "name": "@vue/shared",
  "version": "1.0.0",

  "description": "",
  "main": "index.js",
  "buildOptions":{
    "formats":[
      "cjs",
      "esm-boundler"
    ]
  }
}

开发打包

在项目根路径下的package.json添加打包命令

  "dev": "node scripts/dev.js reactivity -f global"

打包命令表明,node的运行指令在 scripts/dev.js,后面跟着的是指令参数.接着创建 scripts文件夹和 dev.js文件,dev.js文件如下

const { resolve } = require("path");
const { build } = require("esbuild");
//得到打包指令的参数
const args = require("minimist")(process.argv.slice(2));
//  "node scripts/dev.js reactivity -f global"
const target = args._[0] || reactivity; //reactivity 如果第二个参数没有传递,默认打包reactivity
const format = args.f || "global"; //打包的格式
// 设置打包的路径
const pkg = require(resolve(__dirname, `../packages/${target}/package.json`));
// 输入格式
const outpuFormat = format.startsWith("global")
  ? "iife"
  : format === "cjs"
  ? "cjs"
  : "esm";
//   打包保存后的文件
const outfile = resolve(
  __dirname,
  `../packages/${target}/dist/${target}.${format}.js`
);
console.log("----->", outpuFormat);

// 编译打包
build({
  entryPoints: [resolve(__dirname, `../packages/${target}/src/index.ts`)],
  outfile,
  bundle: true,
  sourcemap: true,
  format: outpuFormat,
  globalName: pkg.buildOptions?.name,
  platform: format === "cjs" ? "node" : "browser",
  watch: {
    onRebuild(error) {
      if (!error) {
        console.log("build");
      } else {
        console.log("错误", error);
      }
    },
  },
}).then(() => {
  console.log("文件发生变化");
});

测试打包

在终端运行 pnpm run dev, 会发现 reactivity 目录下多出一个 dist 的打包文件,新建一个 html 测试打包文件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./reactivity.global.js"></script>
</head>

<body>
    <script>
        // console.log("")
    </script>
</body>

</html>

出现打印则表示环境搭建成功