Vue3 源码解析-pnpm 开发环境的搭建pnpm
前言
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>
出现打印则表示环境搭建成功
image.png
