前言
所谓万丈高楼平地起，一切的开始都要从工程的创建开始
本小节，我们一起来搭建svite
源码获取
更新进度
公众号：更新至第3节
博客：更新至第1节
源码分析
时下最流行的工程搭建方式大致有两种：monorepo和multirepo。要想判断也很简单，对于pnpm，它的典型是pnpm-workspace.yaml文件，而对于yarn或npm而言，则一般会在根目录有一个learn.json的配置文件。显然vite是采用前者实现的monorepo
packages:
- "packages/*"
上边的配置表示在packages下的第一级目录对应的工程都是一个独立的npm包
packages/
create-vite/
vite/
现在来看package.json文件，比较关键的信息如下
{
...
"preinstall": "npx only-allow pnpm",
"type": "module",
"scripts": {
"build": "pnpm -r --filter='./packages/*' run build",
"dev": "pnpm -r --parallel --filter='./packages/*' run dev"
},
...
}
如上，vite借助only-allow对包管理器进行了限制，前文说过，不同的包管理器实现monorepo的方式不同，这可以将包管理器强制限定为pnpm；type字段标识这是一个esm格式的项目，它应该基于import而非require来实现模块管理；scripts中的脚本则用于一键启动
搭建工程
1.搭建monorepo
- 初始化 package.json
npm init -y
- 整理并保留如下字段
在这些字段中，有两处恰好体现了monorepo的好处：一个是scripts字段，它定义的dev脚本可以一键启动而非逐个启动packages目录下的工程；另一个则是devDependencies字段，它定义的依赖只需要安装一次，就可以被packages目录下的工程共享
{
"name": "mini-vite",
"private": true,
"type": "module",
"engines": {
"node": "^14.18.0 || >=16.0.0"
},
"homepage": "https://github.com/supanpanCn/svite#readme",
"repository": {
"type": "git",
"url": "git+https://github.com/supanpanCn/svite.git"
},
"scripts": {
"dev": "pnpm -r --parallel --filter='./packages/*' run dev"
},
"author": "spp",
"devDependencies": {
"@types/node": "^20.3.1"
}
}
- 新建 pnpm-workspace.yaml 文件，并将工作区指向 packages 文件夹
packages:
- "packages/*"
2.创建子工程
package.json
新建packages/vite目录，并使用npm init -y初始化package.json。整理并保留如下字段
{
"name": "svite",
"version": "0.0.0",
"type": "module",
"license": "MIT",
"author": "spp",
"bin": {
"svite": "bin/vite.js"
},
"main": "./dist/node/index.js",
"types": "./dist/node/index.d.ts",
"exports": {
".": {
"types": "./dist/node/index.d.ts",
"import": "./dist/node/index.js"
}
},
"engines": {
"node": "^14.18.0 || >=16.0.0"
},
"scripts": {
"dev": "rimraf dist && rollup --config rollup.config.ts --configPlugin typescript"
},
"dependencies": {
"rollup": "^3.21.0"
},
"devDependencies": {
"@rollup/plugin-commonjs": "^25.0.1",
"@rollup/plugin-json": "^6.0.0",
"@rollup/plugin-node-resolve": "15.1.0",
"@rollup/plugin-typescript": "^11.1.1",
"tslib": "^2.5.3",
"typescript": "^5.1.3"
},
"peerDependencies": {
"@types/node": ">= 14"
}
}
- bin
由于svite需要作为命令行使用，因此，在上边定义了bin字段，但其指向的文件目前尚不存在，我们来创建它
在packages\vite下新建bin目录并在bin目录下新建vite.js文件，它的内容我们暂时写死如下
console.log('to do')
- rollup.config.ts
从前文package.json中的scripts脚本可知，svite是基于rollup构建的。故在与bin 目录同级新建rollup.config.ts配置文件
如下，都是rollup常用配置，此处笔者不再赘述
import { readFileSync } from "node:fs";
import path from "node:path";
import { fileURLToPath } from "node:url";
import nodeResolve from "@rollup/plugin-node-resolve";
import typescript from "@rollup/plugin-typescript";
import commonjs from "@rollup/plugin-commonjs";
import json from "@rollup/plugin-json";
import type { RollupOptions } from "rollup";
import { defineConfig } from "rollup";
const pkg = JSON.parse(
readFileSync(new URL("./package.json", import.meta.url)).toString()
);
const __dirname = fileURLToPath(new URL(".", import.meta.url));
// sharedNodeOptions 是为了后续增加其他打包入口时提取用于公用的配置项
const sharedNodeOptions = defineConfig({
treeshake: {
moduleSideEffects: "no-external",
propertyReadSideEffects: false,
tryCatchDeoptimization: false,
},
output: {
dir: "./dist",
entryFileNames: `node/[name].js`,
chunkFileNames: "node/chunks/dep-[hash].js",
exports: "named",
format: "esm",
externalLiveBindings: false,
freeze: false,
},
onwarn(warning, warn) {
if (warning.message.includes("Circular dependency")) {
return;
}
warn(warning);
},
plugins: [
nodeResolve({ preferBuiltins: true }),
typescript({
tsconfig: path.resolve(__dirname, "src/node/tsconfig.json"),
sourceMap: true,
declaration: true,
declarationDir: "./dist/node",
}),
commonjs({
extensions: [".js"],
ignore: ["bufferutil", "utf-8-validate"],
}),
json(),
],
});
const config = defineConfig({
...sharedNodeOptions,
input: {
// 打包入口
index: path.resolve(__dirname, "src/node/index.ts"),
},
output: {
...sharedNodeOptions.output,
sourcemap: true,
},
// 使用 external 将本地开发环境依赖剔除有利于提高构建效率
external: [
...Object.keys(pkg.dependencies),
...Object.keys(pkg.devDependencies),
],
});
export default (): RollupOptions[] => {
return defineConfig([config]);
};
- ts
越大、参与方越多的项目越需要接入typescript约束，尽管svite并不完全具备该特性且不以此为重点，不过，我们仍参照vite进行引入
首先，在packages\vite下新建tsconfig.base.ts文件，它将作为公共配置文件被共享
{
"compilerOptions": {
"target": "ES2020",
"module": "ESNext",
"moduleResolution": "node",
"strict": true,
"declaration": true,
"noImplicitOverride": true,
"noUnusedLocals": true,
"esModuleInterop": true,
"useUnknownInCatchVariables": false
}
}
接着，在packages\vite下新建tsconfig.ts文件，并extends扩展tsconfig.base.ts 文件
{
"extends": "./tsconfig.base.json",
"include": ["./rollup.config.ts"],
"compilerOptions": {
"esModuleInterop": true,
"declaration": false,
"resolveJsonModule": true
}
}
最后，在packages\vite\src\node下新建tsconfig.ts文件
{
"extends": "../../tsconfig.base.json",
"include": ["./"],
"compilerOptions": {
"lib": ["ESNext", "DOM"]
}
}
- 准备入口
在packages\vite下按照目前的打包入口新建src/node/index.ts文件，并输出打印如下
console.log("hello vite");
调试
回到根目录，执行pnpm run dev，输出如下表示成功
启动playground/dev下的示例，报错如下
这是因为，svite未被设置到根package.json导致的
修改后重启，可以看到控制台可以正确调用到vite.js
总结
svite是一个基于pnpm的monorepo，它的关键点就是设置pnpm-workspace.yaml文件，它的好处就是可以提取和管理公共依赖
