1.create-vite的作用

快速搭建你的第一个 Vite 项目。支持的框架vue，react，svelte等

2.文件目录

里面包含常用框架的模板，区分js和ts版本

3.代码分析

使用方法

npm create vite@latest //需要手动选择框架和项目类型
//或者 直接可以创建vue ts项目
npm create vite@latest my-vue-app --template vue-ts

生成项目的流程
- a.获取到命令行的输入数据：项目名称，框架，项目类型，如果检测到已经有这个项目，提示是否覆盖
- b. 获取root，新建项目的根路径，创建新的文件夹
- c. 根据项目类型读取项目模板，如vue-ts项目 variant=vue-ts，读取 template-vue-ts的模板文件.循环写文件
- d. 读取到模板里面的package.json的文件内容,重写package.json
- e.选择包管理工具，默认使用npm来管理包
- f.提示项目创建**==好了，运行npm install ,npm run dev 命令
代码解析

 const root = path.join(cwd, targetDir)
//overwrite：如果项目已经存在，会提示是否覆盖
  if (overwrite) {
  //覆盖则清空文件
    emptyDir(root)
  } else if (!fs.existsSync(root)) {
  //创建新文件
    fs.mkdirSync(root, { recursive: true })
  }
  
   console.log(`\nScaffolding project in ${root}...`)
//根据命令拼接模板文件名称 如：template-vue-ts
  const templateDir = path.resolve(
    fileURLToPath(import.meta.url),
    '..',
    `template-${template}`
  )
  //写文件的方法
    const write = (file, content) => {
    const targetPath = renameFiles[file]
      ? path.join(root, renameFiles[file])
      : path.join(root, file)
    if (content) {
      fs.writeFileSync(targetPath, content)
    } else {
      copy(path.join(templateDir, file), targetPath)
    }
  }
  //读取到模板文件夹，循环写文件\\packages\\create-vite\\template-vue-ts'，
//package.json后面会单独处理
/**
 * 
0:'.vscode'
1:'index.html'
2:'package.json'
3:'public'
4:'README.md'
5:'src'
6:'tsconfig.json'
7:'tsconfig.node.json'
8:'vite.config.ts'
9:'_gitignore'
 */
  const files = fs.readdirSync(templateDir)
  for (const file of files.filter((f) => f !== 'package.json')) {
    write(file)
  }
//读取到模板里面的package.josn的文件内容
  const pkg = JSON.parse(
    fs.readFileSync(path.join(templateDir, `package.json`), 'utf-8')
  )
  //重写package.json文件的内容
  write('package.json', JSON.stringify(pkg, null, 2))

  const pkgInfo = pkgFromUserAgent(process.env.npm_config_user_agent)
  const pkgManager = pkgInfo ? pkgInfo.name : 'npm'//默认使用npm来管理包
//提示 项目创建好了，运行npm install ,npm run dev 命令
  console.log(`\nDone. Now run:\n`)
  if (root !== cwd) {//cd 到新建项目下
    console.log(`  cd ${path.relative(cwd, root)}`)
  }
  switch (pkgManager) {
    case 'yarn':
      console.log('  yarn')
      console.log('  yarn dev')
      break
    default:
      console.log(`  ${pkgManager} install`)
      console.log(`  ${pkgManager} run dev`)
      break
  }
  console.log()
}

4.总结

vite快速创建项目和之前tdesign-vue的快速创建组件都是类似的读取模板文件，然后写入的流程。接下来可以考虑在自己的项目里面使用快速创建组件的想法。

vite 3.0 都发布了，这次来手撕 create-vite 源码

1.create-vite的作用

2.文件目录

3.代码分析

4.总结