1.准备工作

首先clone vite的代码：

git clone  https://github.com/vitejs/vite.git

然后在packages中找到create-vite

2.源码解读

2.1 确定入口文件

读源码第一步是找到入口文件，根据package.json的bin选项可以知道执行create-vite命令时会执行index.js文件，所以index.js文件就是入口文件。

2.2 create-vite 执行流程

index.js文件的源码行数不到400，整体逻辑清晰易懂，这里只总结了其执行流程和一些关键代码供参考。如果您想详细了解对其源码的分析可以阅读本文最后的参考资料。

可以结合下图来理解上面的流程：

2.3 create-vite关键代码

2.3.1 copy拷贝文件到目录

function copy(src, dest) {
  const stat = fs.statSync(src)
  if (stat.isDirectory()) {
    copyDir(src, dest)
  } else {
    fs.copyFileSync(src, dest)
  }
}

fs.statSync获取文件信息，然后判断是文件还是目录。如果是目录则使用copyDir拷贝目录中的文件；如果是文件则使用fs.copyFileSync方法拷贝文件。

2.3.2 copyDir源目录文件拷贝到目标目录

function copyDir(srcDir, destDir) {
  fs.mkdirSync(destDir, { recursive: true })
  for (const file of fs.readdirSync(srcDir)) {
    const srcFile = path.resolve(srcDir, file)
    const destFile = path.resolve(destDir, file)
    copy(srcFile, destFile)
  }
}

目标目录不一定存在，所以要新建目录。然后针对源目录的每个文件都要使用path.resolve计算其路径，同理计算目标文件的路径，然后调用copy方法。

2.3.3 isEmpty判断文件夹是否为空文件夹

function isEmpty(path) {
  const files = fs.readdirSync(path)
  return files.length === 0 || (files.length === 1 && files[0] === '.git')
}

使用fs.readdirSync读取文件夹，返回值为文件数组，数组长度为0或者长度为1但是只有.git文件，那么这个文件夹可以认为是空文件夹。

2.3.4 emptyDir将文件夹清空

function emptyDir(dir) {
  if (!fs.existsSync(dir)) {
    return
  }
  for (const file of fs.readdirSync(dir)) {
    fs.rmSync(path.resolve(dir, file), { recursive: true, force: true })
  }
}