《vite技术揭秘、还原与实战》第2节--揭秘yarn create vite

前言

在vite源码中，一共有三个工程，其中create-vite是一个辅助工具，用于快速创建模板工程，本小节，一起来看下它是怎么实现的

更新进度

公众号：更新至第5节

博客：更新至第2节

源码分析

在开始分析源码前，有一个前置知识点需要进行下简要补充，即npm init、 npm create和npm exec都是什么

1-npm init等价于npm create，它们的完整写法为npm init <initializer>

2-npm init最终会以npm exec create-<initializer>的形式调用npm exec

3-npm exec的执行流程

首先，从本地查找是否存在与create-<initializer>同名的包

如果找到包，则判断package.json文件中设置的bin字段，当为多入口时，尝试在key中查找与包名同名的key值并调用key对应的value值指向的文件，否则对bin字段指向的文件直接进行调用

如果找不到包，则尝试从远程查找与create-<initializer>同名的包并下载到本地后重复上一步骤

现在，来看源码

已知，vite是monorepo架构的，因此其packages文件夹下的create-vite将会被单独发布，故一定能命中该包，并且，该包的package.json的bin字段中存在与包name同名的create-vite，其对应的值最终指向的是packages\create-vite\src\index.ts文件

{
  "name": "create-vite",
  ...
  "bin": {
    "create-vite": "index.js",
    "cva": "index.js"
  }
  ...
}

进入packages\create-vite\src\index.ts

首先获取用户传递的参数

const argv = minimist<{
  t?: string;
  template?: string;
}>(process.argv.slice(2), { string: ["_"] });

接着借助prompts通过控制台收集用户反馈

result = await prompts(...)

然后根据用户输入的反馈信息，到本地模板中进行匹配，比如选择了vue和typescript，最终拼接的结果就是：C:...\vite\packages\create-vite\template-vue-ts

const templateDir = path.resolve(
  fileURLToPath(import.meta.url),
  "../..",
  `template-${template}`
);

获取的这个路径是指向create-vite包内模版文件的绝对路径

只需要使用node的文件读取命令，将匹配的本地模板copy到用户的目录中就可以了

function copy(src: string, dest: string) {
  const stat = fs.statSync(src);
  if (stat.isDirectory()) {
    /**
      如果是目录，则进行递归
      即遍历目录，重复调用write函数
    */
    copyDir(src, dest);
  } else {
    fs.copyFileSync(src, dest);
  }
}
const write = (file: string, ...) => {
  const targetPath = path.join(root, renameFiles[file] ?? file);
  ...
  copy(path.join(templateDir, file), targetPath);
};
// 读取目录
const files = fs.readdirSync(templateDir);
for (const file of files.filter((f) => f !== "package.json")) {
  // 将目标路径下的资源写入到用户目录
  write(file);
}

代码实现

首先，我们在packages文件夹下新建create-vite目录，并进行初始化。如下，只保留三个参数，这里就不再通过构建工具进行打包了

{
  "name": "create-vite",
  "version": "0.0.0",
  "bin": "index.js"
}

接着，在packages\create-vite下新建index.js文件，它应当是一个立即执行函数

(function () {
  // TODO
})();

现在，来考虑参数部分，我并不打算提供太多客制化的内容，只需要把仓库名称作为一个变量交给用户定义即可，这里使用--projectName来承载

(function () {
  const args = process.argv.slice(2);
  if (args.length && args.length === 2 && args[0] === "--projectName") {
    return;
  }
  console.error("projectName缺失，请使用--projectName yourname");
})();

对于用户传递的项目名称，得将其拼接成绝对路径

const projectName = require("path").join(process.cwd(), args[1]);

在create-vite中是将模板事先定义到本地并通过node的文件操作读写到用户本地的，我们这里换种方式，直接使用git将模板clone到用户本地

为此，需要用到子进程的exec函数执行git clone，这里把笔者之前已经配置好的vue3工程宕下来

check();
const exec = require("child_process").exec;
// 这里也可以通过控制台交互的形式将要下载的地址外部化
exec(
  "git clone https://github.com/supanpanCn/vue-blob.git",
  { clone: true },
  (err) => {
    if (err) {
      console.error("模板下载失败，请稍后重试", err);
    } else {
      adjustTemplate();
      console.log("模板下载成功");
    }
  }
);

不过目前clone下来的文件夹名称是仓库名，还需要按照收集到的信息对其进行重命名，不过在此之前，得先判断下目标仓库是否已经存在，如果存在，就对其重新进行下命名并做相应的提示

function check(projectName) {
  const fs = require("fs");
  const path = require("path");
  const prefix = process.cwd();
  const targetPath = path.resolve(prefix, projectName);
  if (fs.existsSync(targetPath)) {
    console.error("仓库已存在，重新命名为：projectName_1");
    adjustTemplate(projectName, "projectName_1");
  }
}

最后，在clone执行成功后，调用adjustTemplate对文件名称做修改就可以了

function adjustTemplate(oldName, newName) {
  const fs = require("fs");
  const path = require("path");
  const prefix = process.cwd();
  const oldPath = path.resolve(prefix, oldName);
  const newPath = path.resolve(prefix, newName);
  if (fs.existsSync(oldPath)) {
    fs.renameSync(oldPath, newPath);
  }
}

调试

在packages/create-vite/package.json下新建scripts

"scripts": {
    "dev": "node ./index.js --projectName vite-project"
}

运行dev，模板被从远程下载，并且，其名称也从默认的vue-blob修改成了指定的vite-project

总结

create-vite其实就是单纯的在玩node的文件操作命令，将文件从位置A移动到位置B

由于其并不清楚用户想要创建的到底是哪一个模板，因此需要借助prompts来创建表单收集用户信息以使其更准确、更智能的工作