为啥能用 npm create vite 创建项目

前言

如今，Vite 已经成为前端项目的主流构建工具，尤其是在开发 Vue3 项目时，大多数开发者已经转向使用 Vite。在初始化项目时，官方文档推荐使用 npm create vite <project-name> 命令来创建项目。与以往需要全局安装命令行工具再通过工具初始化项目的方式不同，npm create vite 提供了一种更简洁、更轻量化的项目创建方式。那么，你有没有想过，为什么可以通过 npm create vite 来快速创建一个 Vite 项目？这个命令的原理是什么？它是如何实现的？本篇文章将深入探讨这个问题，解释 npm create vite 背后的原理与实现方法。

`npm create` 命令的背景

首先，我们需要了解 npm create 命令。npm 是 Node.js 的包管理工具，而 npm create 实际上是 npm init 的别名。也就是说，npm create vite 和 npm init vite 是等价的。

npm create 命令的核心功能是根据指定的脚手架工具来创建新项目。通过 npm create <tool>，你可以使用指定的工具来创建一个新的项目结构。

`npm create` 的原理

npm create 命令的工作原理非常简单：它实际上会执行 npm init <tool> 命令，后者会查找并运行一个名为 create-<tool> 的包，执行该包的默认操作。因此，npm create 会根据 <tool> 的不同，去寻找相应的工具包并运行。

如果省略 <tool> 参数（仅调用 npm create），init 将回退到旧版 init 行为。它会问你一堆问题，然后为你生成一个 package.json 文件。

`npm create vite` 背后的工具

当我们使用 npm create vite 命令时，NPM 会查找名为 create-vite 的工具包。如果存在这个工具包，NPM 就会通过 npm exec 命令执行该包，并用它来生成一个新的 Vite 项目。create-vite 实际上是 Vite 官方提供的一个脚手架工具，它负责初始化一个新的 Vite 项目，并为开发者提供选项。

`npm create vite` 命令的实现原理

为了深入理解 npm create vite 命令的实现，我们可以从 Vite 项目的结构和 NPM 的工作方式来分析。

`create-vite` 工具包

create-vite 是一个 NPM 包，它的作用是创建一个新的 Vite 项目。在 Vite 官方的 GitHub 仓库中，你可以看到 create-vite 工具包的实现。它的主要功能包括：

引导用户输入：通过命令行提示，帮助用户选择项目模板（例如 Vue、React 等）。
下载模板：根据用户选择的模板，自动下载相应的项目结构。
初始化项目：生成 Vite 项目的配置文件，安装所需的依赖，并初始化一个基本的开发环境。

`npm create` 实现流程

运行 npm create 命令：当我们在命令行中输入 npm create vite 时，NPM 会尝试查找名为 create-vite 的包。
执行 create-vite 包：一旦找到该包，NPM 就会执行它。在执行过程中，create-vite 会根据用户的输入，选择不同的模板，并自动配置 Vite 项目的结构。
初始化项目：最后，create-vite 会根据所选模板生成一个新的 Vite 项目

通过这种方式，开发者只需要运行一个命令，就可以自动创建并配置好一个新的 Vite 项目。

实现一个工具包

为了进一步理解 npm create <tool> 的实现，我们可以自己动手实现一个简单的工具包。

创建一个项目

首先，我们需要创建一个项目：

1
2
3

mkdir create-zycode
cd create-zycode
npm init -y

修改 package.json，新增 bin 配置。注意，bin 配置中必须有一个 key 和包名一致：

{
  "name": "create-zycode",
  "version": "1.0.0",
  "description": "A CLI tool to initialize template projects",
  "main": "index.js",
+  "bin": {
+    "create-zycode": "index.js"
+  },
  "scripts": {
    "start": "node index.js"
  },
  "author": "zi.yang",
  "license": "MIT",
  "dependencies": {}
}

复制一个模板

为了方便，我们可以直接从 Vite 仓库复制一个 template-vue 的模板，放到项目的根目录。

添加命令行实现

在根目录创建一个 index.js 文件，文件头部一定要加上 #!/usr/bin/env node 声明，否则执行时会报错。

下面的代码逻辑很简单：通过 process.cwd() 获取命令执行时的路径，然后通过 __dirname 获取脚本目录的位置。接着判断目标文件夹是否存在，如果不存在则创建一个，如果存在则提示并退出。

创建好目录之后，通过递归的方式读取模板文件，并通过 fs.copyFileSync 拷贝文件。

#!/usr/bin/env node

/*
 * @Author: zi.yang
 * @Date: 2025-01-07 11:09:12
 * @LastEditors: zi.yang
 * @LastEditTime: 2025-01-07 11:11:03
 * @Description: npm create 演示脚本
 * @FilePath: /create-zycode/index.js
 */
const fs = require('fs');
const path = require('path');

// 获取命令行参数
const args = process.argv.slice(2);
const projectName = args[0] || 'my-project';

const cwd = process.cwd();
// 获取命令执行的目录
const projectPath = path.join(cwd, projectName);
// 获取模板路径
const templatePath = path.join(__dirname, 'template-vue');

// 创建项目目录
if (!fs.existsSync(projectPath)) {
    fs.mkdirSync(projectPath);
    console.log(`Project directory ${projectName} created.`);
} else {
    console.error(`Directory ${projectName} already exists.`);
    process.exit(1);
}

// 复制模板文件到项目目录
function copyTemplateFiles(srcDir, destDir) {
    const files = fs.readdirSync(srcDir);

    files.forEach(file => {
        const srcFile = path.join(srcDir, file);
        const destFile = path.join(destDir, file);

        if (fs.lstatSync(srcFile).isDirectory()) {
            fs.mkdirSync(destFile);
            copyTemplateFiles(srcFile, destFile);
        } else {
            fs.copyFileSync(srcFile, destFile);
        }
    });
}

copyTemplateFiles(templatePath, projectPath);

console.log('Template project initialized.');

测试命令

实现完成后，将这个包发布到 npm，然后执行以下命令：

1	`npm create zycode@latest my-template`

这里有一个小细节：为什么在执行时要加 latest 版本号？其实这是因为每次执行 npm create <tool> 时，会首先将这个包下载到本地。如果你没有加 latest，下次执行时会直接使用本地的包，而不会重新下载。如果想要使用最新版本，就必须添加版本号。

结语

npm create vite 命令的实现依赖于 NPM 的 create 命令，它会自动执行 create-vite 工具包来初始化项目。这个工具包通过命令行交互和模板下载，帮助开发者快速搭建一个新的 Vite 项目。

通过了解这一原理，我们能更清楚地理解为什么可以使用 npm create vite 来创建 Vite 项目，并掌握如何使用 NPM 的 create 命令实现自己的模板工具包。

为啥能用 npm create vite 创建项目

前言

npm create 命令的背景

npm create 的原理

npm create vite 背后的工具

npm create vite 命令的实现原理

create-vite 工具包

npm create 实现流程