揭秘 create-vite 原理：用不到 400 行代码构建自己的脚手架

2023-09-04 10:05:18

vite 3.0 已经发布，相信很多开发者都在跃跃欲试，迫不及待地想要体验新版本带来的特性。但你知道吗？每次初始化一个 vite 项目，其实都离不开一个名为 create-vite 的工具。今天，我们就来一起揭开 create-vite 的神秘面纱，看看它究竟是如何工作的。

深入 create-vite 源码

create-vite 的源码非常简洁，不到 400 行代码。它主要做了以下几件事：

获取用户输入： create-vite 会通过命令行参数获取用户输入，包括项目名称、项目类型等信息。
创建项目目录： 根据用户输入，create-vite 会在当前目录下创建项目目录。
初始化项目： create-vite 会在项目目录下创建必要的配置文件和文件，如 package.json、README.md 等。
安装依赖： create-vite 会通过 npm 安装项目所需的依赖。
创建示例代码： 根据项目类型，create-vite 会创建一些示例代码，如 index.html、main.js 等。

动手实践：构建自己的脚手架工具

理解了 create-vite 的原理，我们就可以动手构建自己的脚手架工具了。这里，我们以一个简单的脚手架工具为例，它可以创建一个基于 React 的项目：

// create-react-app.js
const fs = require('fs');
const path = require('path');
const execSync = require('child_process').execSync;

const projectName = process.argv[2];
const projectDir = path.join(process.cwd(), projectName);

// 创建项目目录
fs.mkdirSync(projectDir);

// 初始化项目
fs.writeFileSync(path.join(projectDir, 'package.json'), JSON.stringify({
  name: projectName,
  version: '1.0.0',
  scripts: {
    start: 'react-scripts start',
    build: 'react-scripts build',
    test: 'react-scripts test',
  },
}, null, 2));

fs.writeFileSync(path.join(projectDir, 'README.md'), `# ${projectName}\n\nA simple React project created with create-react-app.`);

// 安装依赖
execSync('npm install react react-dom', { cwd: projectDir });

// 创建示例代码
fs.writeFileSync(path.join(projectDir, 'src', 'index.js'), `import React from 'react';\nimport ReactDOM from 'react-dom';\n\nReactDOM.render(<h1>Hello, world!</h1>, document.getElementById('root'));`);

fs.writeFileSync(path.join(projectDir, 'src', 'index.css'), `body {\n  font-family: sans-serif;\n}`);

fs.writeFileSync(path.join(projectDir, 'public', 'index.html'), `<!DOCTYPE html>\n<html>\n<head>\n  <meta charset="UTF-8" />\n  \n  <link rel="stylesheet" href="./index.css" />\n</head>\n<body>\n  <div id="root"></div>\n</body>\n</html>`);

console.log(`Project ${projectName} created successfully!`);