create-vue快速生成项目，到底是怎么做的

前言

前段时间我们有去探索了一下vue-cli、cra的原理，生成项目的过程，他是基于webpack的，但是今天我们的主角是create-vue，他是基于vite的，为什么要使用vite而不是webpack呢？因为vite比webpack快。 我们使用vue-cli和vite快速生成一个项目分别耗时如下：

webpack：

vite：

就目前的图来看vite在构建、启动项目的时候会比webpack快10倍，这还是仅仅只是简单的项目，前端的项目复杂程度本来就是呈指数上升的，这时候vite与webpack可谓是天差地别。那么接下来我将带领大家一步一步去探索vite的各种优点。

准备工作

首先我们接着前言里面如何用vite去初始化一个Vue3的项目吧。 官方推荐使用

npm init vue@latest 这个命令将会去创建一个create-vue脚手架，实际的本质就是去下载create-vue这个包，然后执行index.ts文件。

前置导入模块

import * as fs from 'node:fs'
import * as path from 'node:path'
// fileURLToPath用来获取根路径的，源码里面没有，在下文path.resolve(__dirname, 'template') 那里会报错。
// 原因：因为在package.json里面定义的为ESM规范，而在index.ts文件里面，
出现了Common.js规范，两种规范下的实现是不同的，所以会报错：__dirname is not define
import { fileURLToPath } from 'url' 

import minimist from 'minimist' // 解析命令行参数
import prompts from 'prompts' // 命令行交互
import { red, green, bold } from 'kolorist' // 有色输出

// 在控制台打印的banner
// gradientBanner 内容为下面的a变量
// const defaultBanner = 'Vue.js - The Progressive JavaScript Framework'
import * as banners from './utils/banners'

import renderTemplate from './utils/renderTemplate'
import { postOrderDirectoryTraverse, preOrderDirectoryTraverse } from './utils/directoryTraverse'
import generateReadme from './utils/generateReadme'
import getCommand from './utils/getCommand'
import renderEslint from './utils/renderEslint' 

工具函数

isValidPackageName

我们发现在cra、vue-cli中都是借助于validate-npm-package-name这个包实现的，这里面选择了重写这个库，省去了库的安装，读取等操作，进而提升速度。

function isValidPackageName(projectName) {return /^(?:@[a-z0-9-*~][a-z0-9-*._~]*\/)?[a-z0-9-~][a-z0-9-._~]*$/.test(projectName)
} 

toValidPackageName

如果包名检查不合法就要把他变为合法的，比如toValidPackageName(myProject) => myproject，还会去空格等。

function toValidPackageName(projectName) {return projectName.trim().toLowerCase().replace(/\s+/g, '-') // 匹配空白字符到的第一个字符开始，直到匹配失败 eg:'lov e' => 'lov-e'.replace(/^[._]/, '') // 匹配 '.' '_' 为 ''.replace(/[^a-z0-9-~]+/g, '-') // 包含a-z、 0-9 - ~ 重复多个
}