《vite技术揭秘、还原与实战》第1节--svite工程搭建

前言

所谓万丈高楼平地起，一切的开始都要从工程的创建开始

本小节，我们一起来搭建svite

源码获取

传送门

更新进度

公众号：更新至第3节

博客：更新至第1节

源码分析

时下最流行的工程搭建方式大致有两种：monorepo和multirepo。要想判断也很简单，对于pnpm，它的典型是pnpm-workspace.yaml文件，而对于yarn或npm而言，则一般会在根目录有一个learn.json的配置文件。显然vite是采用前者实现的monorepo

yml 复制代码

packages:
  - "packages/*"

上边的配置表示在packages下的第一级目录对应的工程都是一个独立的npm包

file 复制代码

packages/
    create-vite/
    vite/

现在来看package.json文件，比较关键的信息如下

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

js 复制代码

npm init -y

整理并保留如下字段

在这些字段中，有两处恰好体现了monorepo的好处：一个是scripts字段，它定义的dev脚本可以一键启动而非逐个启动packages目录下的工程；另一个则是devDependencies字段，它定义的依赖只需要安装一次，就可以被packages目录下的工程共享

json 复制代码

{
  "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 文件夹

yml 复制代码

packages:
  - "packages/*"

2.创建子工程

package.json

新建packages/vite目录，并使用npm init -y初始化package.json。整理并保留如下字段

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"
  }
}

由于svite需要作为命令行使用，因此，在上边定义了bin字段，但其指向的文件目前尚不存在，我们来创建它

在packages\vite下新建bin目录并在bin目录下新建vite.js文件，它的内容我们暂时写死如下

js 复制代码

console.log('to do')

rollup.config.ts

从前文package.json中的scripts脚本可知，svite是基于rollup构建的。故在与bin 目录同级新建rollup.config.ts配置文件

如下，都是rollup常用配置，此处笔者不再赘述

ts 复制代码

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]);
};

越大、参与方越多的项目越需要接入typescript约束，尽管svite并不完全具备该特性且不以此为重点，不过，我们仍参照vite进行引入

首先，在packages\vite下新建tsconfig.base.ts文件，它将作为公共配置文件被共享

json 复制代码

{
  "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 文件

json 复制代码

{
  "extends": "./tsconfig.base.json",
  "include": ["./rollup.config.ts"],
  "compilerOptions": {
    "esModuleInterop": true,
    "declaration": false,
    "resolveJsonModule": true
  }
}

最后，在packages\vite\src\node下新建tsconfig.ts文件

json 复制代码

{
  "extends": "../../tsconfig.base.json",
  "include": ["./"],
  "compilerOptions": {
    "lib": ["ESNext", "DOM"]
  }
}

准备入口

在packages\vite下按照目前的打包入口新建src/node/index.ts文件，并输出打印如下

ts 复制代码

console.log("hello vite");

调试

回到根目录，执行pnpm run dev，输出如下表示成功

启动playground/dev下的示例，报错如下

这是因为，svite未被设置到根package.json导致的

修改后重启，可以看到控制台可以正确调用到vite.js

总结

svite是一个基于pnpm的monorepo，它的关键点就是设置pnpm-workspace.yaml文件，它的好处就是可以提取和管理公共依赖