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

本文探讨了create-vue是如何基于webpack快速生成Vue项目的,对比了与yeoman的性能差异,并详细介绍了create-vue的初始化过程,包括前置导入模块、工具函数如isValidPackageName、init阶段的配置合并、入口文件生成、README.md创建等步骤。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前言

前段时间我们有去探索了一下vue-clicra的原理,生成项目的过程,他是基于webpack的,但是今天我们的主角是create-vue,他是基于vite的,为什么要使用vite而不是webpack呢?因为vitewebpack快。 我们使用vue-clivite快速生成一个项目分别耗时如下:

webpack

vite

就目前的图来看vite在构建、启动项目的时候会比webpack快10倍,这还是仅仅只是简单的项目,前端的项目复杂程度本来就是呈指数上升的,这时候vitewebpack可谓是天差地别。那么接下来我将带领大家一步一步去探索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 - ~ 重复多个
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值