借鉴 create-vite 搭建自己的创建项目工具（2）：项目搭建与发包

2024-02-10 11:07:28

引言

在上一篇文章《借鉴 create-vite 搭建自己的创建项目工具（1）：源码分析》中，我们简单介绍了 create-vite 的源码知识。本文将继续深入探讨，带你动手搭建一个属于自己的创建项目工具。

项目初始化

首先，创建一个文件夹，然后执行以下命令进行初始化：

mkdir my-create-vite
cd my-create-vite
npm init @vitejs/create-app

安装依赖

初始化完成后，安装必要的依赖项：

npm install

创建项目

执行以下命令创建项目：

npm run create my-new-project

项目结构

创建成功后，项目结构如下：

my-create-vite
├── my-new-project
│   ├── package.json
│   ├── vite.config.js
│   ├── src
│   │   ├── App.js
│   │   ├── index.css
│   │   ├── index.html
│   └── README.md
└── package.json

修改代码

接下来，我们对 my-create-vite 项目进行修改，使其成为我们自己的创建项目工具。

修改 package.json

修改 my-create-vite/package.json 文件，添加如下代码：
```
"bin": {
  "create-my-project": "bin/create-my-project.js"
}
```
创建 create-my-project.js

在 my-create-vite/bin 目录下创建 create-my-project.js 文件，并添加如下代码：
```
const { createProject } = require('./create-project');

createProject(process.argv[2]);
```
其中，createProject 函数是我们自定义的创建项目函数，将在稍后实现。

实现 createProject 函数

在 my-create-vite/bin/create-project.js 文件中，实现 createProject 函数：

const fs = require('fs');
const path = require('path');
const execa = require('execa');

function createProject(projectName) {
  const projectPath = path.join(process.cwd(), projectName);

  if (fs.existsSync(projectPath)) {
    console.error(`项目 ${projectName} 已存在`);
    return;
  }

  fs.mkdirSync(projectPath);
  process.chdir(projectPath);

  execa.sync('npm', ['init', '-y']);
  execa.sync('npm', ['install', 'vite', '--save-dev']);
  execa.sync('npm', ['install', 'create-react-app', '--save-dev']);

  const templatePath = path.join(__dirname, '..', 'template');
  fs.copySync(templatePath, projectPath, { recursive: true });

  console.log(`项目 ${projectName} 创建成功`);
}