拆解Vite：从零理解创建项目的过程

前端

2024-01-19 15:50:40

Vite：前端开发的神兵利器

简介

Vite 横空出世，成为前端开发者的宠儿，凭借其闪电般的启动速度、无缝的热重载和出色的构建性能，赢得了众多项目的青睐。Vite 的项目创建过程也颇具匠心，值得深入探索一番。

揭秘 Vite 的项目创建之旅

1. 踏上征程：下载源码

旅程的第一步，你需要下载 Vite 的源码。前往 Vite 的 GitHub 仓库，点击“Clone or download”按钮，选择“Download ZIP”将源码下载到你的本地电脑。

2. 安装依赖：为项目打下坚实基础

下载完成后，解压源码并进入项目目录。接着，运行以下命令安装项目所需的依赖：

npm install

3. 运行脚本：开启项目创建之旅

依赖安装完毕后，是时候运行 create-vite 脚本了。在终端中输入：

npm run create-vite

4. 选择项目类型：自定义你的开发体验

脚本运行后，你将面对一个交互式菜单，让你选择项目类型。你可以选择“default”创建一个基础项目，或者选择“full”创建一个包含更多功能的项目。

5. 命名你的项目：赋予它生命

选择项目类型后，你需要为你的项目输入一个名称。请确保项目名称不包含空格或特殊字符。

6. 创建项目：见证新生的喜悦

输入项目名称后，脚本将开始创建你的项目。这可能需要一些时间，取决于你的网络速度和计算机性能。

7. 项目创建成功：踏入开发的新天地

项目创建成功后，你将在终端中看到以下信息：

Project created successfully!

To get started:

cd my-project
npm install
npm run dev

深入探究项目创建过程

现在，让我们深入了解项目创建过程中的关键代码。在 Vite 的源码中，create-vite 脚本位于 packages/create-vite/index.js 文件中。

const prompts = require('prompts');
const chalk = require('chalk');
const fs = require('fs-extra');
const path = require('path');

const createProject = async (projectDir, projectName, projectType) => {
  // ...
};

const main = async () => {
  const questions = [
    {
      type: 'select',
      name: 'projectType',
      message: 'Select a project type:',
      choices: [
        { title: 'Default', value: 'default' },
        { title: 'Full', value: 'full' },
      ],
    },
    {
      type: 'text',
      name: 'projectName',
      message: 'Enter a project name:',
    },
  ];

  const { projectType, projectName } = await prompts(questions);

  const projectDir = path.resolve(projectName);

  if (fs.existsSync(projectDir)) {
    console.error(chalk.red(`Project already exists at ${projectDir}`));
    process.exit(1);
  }

  await createProject(projectDir, projectName, projectType);

  console.log(chalk.green(`Project created successfully!`));
};

main();