Create?vite理解Vite項目創(chuàng)建流程及代碼實現(xiàn)
前言
繼上次閱讀create-vue后 ，本次接著來解析 create-vite, 得益于之前的閱讀經(jīng)驗, 本篇筆記將會著重講解代碼執(zhí)行流程以及函數(shù)的擴展
最新的 create-vite 已經(jīng)升級為Ts編譯了，為方便學習理解使用川哥提供的源碼倉庫
git clone github.com/lxchuan12/v…
monorepo
Vite和Vue都使用monorepo的形式管理代碼，將原本多代碼倉庫變?yōu)閱未a倉庫，每一個包對應的就是一個項目，這些項目都具有相關性，但在邏輯上是獨立的。
主流程
入口文件
vite2/packages/create-vite/index.js
主要結構
import fs from 'node:fs'
import path from 'node:path'
//...
async function init() {
//...
try {
result = await prompts(
[
//省略若干選項代碼
],
{
onCancel: () => {
throw new Error(red('?') + ' Operation cancelled')
}
}
)
} catch (cancelled) {
console.log(cancelled.message)
return
}
//若干處理代碼
}
init().catch((e) => {
console.error(e)
})
index.js 核心就是執(zhí)行 init這個異步函數(shù)， 通過選項式對話 取到配置變量后 執(zhí)行操作
擴展插件
import minimist from 'minimist'
import prompts from 'prompts'
import {
blue,
cyan,
green,
lightRed,
magenta,
red,
reset,
yellow
} from 'kolorist'
minimist 用于獲取命令行參數(shù)，用于跳過后續(xù)一些選項式對話
prompts 提供了選項式對話的 命令行工具
kolorist 用來在命令行輸出不同顏色的字符
模板配置
const FRAMEWORKS = [
{
name: 'vanilla',
color: yellow,
variants: [
{
name: 'vanilla',
display: 'JavaScript',
color: yellow
},
{
name: 'vanilla-ts',
display: 'TypeScript',
color: blue
}
]
},
//若干代碼
]
const TEMPLATES = FRAMEWORKS.map(
(f) => (f.variants && f.variants.map((v) => v.name)) || [f.name]
).reduce((a, b) => a.concat(b), [])
TEMPLATES 主要用來根據(jù)定義好的配置對象 生成對應后續(xù)template用到的數(shù)組
getProjectName
const getProjectName = () =>
//path.resolve() 默認返回當前目錄
//path.basename(path.resolve()) 對應得到的就是 當前目錄名
targetDir === '.' ? path.basename(path.resolve()) : targetDir
用于獲取項目名， 值得一提的是 path.resolve() 默認返回命令執(zhí)行的目錄，path.basename(path.resolve()) 就是獲取當前目錄名
formatTargetDir
function formatTargetDir(targetDir) {
return targetDir?.trim().replace(/\/+$/g, '')
}
將文本去空，并將末尾的 /斜杠去掉
npm包名驗證和轉化
function toValidPackageName(projectName) {
return projectName
.trim()
.toLowerCase()
.replace(/\s+/g, '-')
.replace(/^[._]/, '')
.replace(/[^a-z0-9-~]+/g, '-')
}
function isValidPackageName(projectName) {
return /^(?:@[a-z0-9-*~][a-z0-9-*._~]*\/)?[a-z0-9-~][a-z0-9-._~]*$/.test(
projectName
)
}
用于驗證是否符合package.json name 的格式 以及轉換函數(shù)
取得模板目錄
const templateDir = path.resolve(
fileURLToPath(import.meta.url),
'..',
`template-${template}`
)
通過resolve 拼接目錄名，根據(jù)用戶的選擇會生成對應的 比如 template-vue-ts
得到npm包管理器相關信息
const pkgInfo = pkgFromUserAgent(process.env.npm_config_user_agent)
const pkgManager = pkgInfo ? pkgInfo.name : 'npm'
function pkgFromUserAgent(userAgent) {
if (!userAgent) return undefined
const pkgSpec = userAgent.split(' ')[0]
const pkgSpecArr = pkgSpec.split('/')
return {
name: pkgSpecArr[0],
version: pkgSpecArr[1]
}
}
process.env.npm_config_user_agent 會返回類似這樣的字符:
npm/6.7.5 xxxx/xxx xxx ，函數(shù)就是取出第一部分然后切割字符， 得到對應的 包管理器以及版本
文件操作相關的函數(shù)
write函數(shù) 寫入文件
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)
}
}
targetPath先匹配.gitignore，否則直接使用參數(shù)的file值。 然后根據(jù)是否傳遞了 content參數(shù)執(zhí)行寫入 和 復制 template目錄下文件 兩個操作
copy函數(shù) 復制文件
function copy(src, dest) {
const stat = fs.statSync(src)
if (stat.isDirectory()) {
copyDir(src, dest)
} else {
fs.copyFileSync(src, dest)
}
}
判斷文件信息， 目錄則執(zhí)行 copyDir函數(shù)， 否則調用 fs 下 的 copyFileSync
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)
}
}
創(chuàng)建目標文件夾，然后遍歷源文件夾 依次將文件 copy過去
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 })
}
}
將目錄變?yōu)榭漳夸?。先判斷目錄是否存在?再遍歷執(zhí)行刪除操作
isEmpty 判斷目錄為空
function isEmpty(path) {
const files = fs.readdirSync(path)
return files.length === 0 || (files.length === 1 && files[0] === '.git')
}
通過fs.readdirSync 得到目錄返回的數(shù)組長度 進行判斷
核心代碼
const { framework, overwrite, packageName, variant } = result
const root = path.join(cwd, targetDir)
//檢查是否可寫入
if (overwrite) {
emptyDir(root)
} else if (!fs.existsSync(root)) {
fs.mkdirSync(root, { recursive: true })
}
// determine template
template = variant || framework || template
console.log(`\nScaffolding project in ${root}...`)
//得到模板目錄
const templateDir = path.resolve(
fileURLToPath(import.meta.url),
'..',
`template-${template}`
)
const write = (file, content) => {
//寫文件函數(shù)
}
const files = fs.readdirSync(templateDir) //得到模板目錄下文件信息
//將默認目錄中非package.json 的文件 復制到 templateDir中
for (const file of files.filter((f) => f !== 'package.json')) {
write(file) //不傳 content 執(zhí)行 copy操作
}
//得到模板目錄中的 package.json內容
const pkg = JSON.parse(
fs.readFileSync(path.join(templateDir, `package.json`), 'utf-8')
)
pkg.name = packageName || getProjectName()
// 修改name 后 寫入 package.json 到 templateDir中中
write('package.json', JSON.stringify(pkg, null, 2))
//得到對應包管理器的 信息 然后回顯
const pkgInfo = pkgFromUserAgent(process.env.npm_config_user_agent)
const pkgManager = pkgInfo ? pkgInfo.name : 'npm'
console.log(`\nDone. Now run:\n`)
if (root !== cwd) {
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()
這一步總體流程如下：
- 檢查目錄是否可寫入
- 得到對應的模板目錄
- 寫入模板目錄的文件到 用戶的目錄中
- 取得包管理器信息 回返顯示 提示信息
總結
path.resolve 是相對于當前工作目錄 返回路徑
path.join 是 根據(jù)path字符串片段拼接返回一個路徑 需要注意區(qū)別
至此 代碼和流程就分析完畢了，相對于create-vue, create-vite要簡單一點點
對于不懂或者不了解的地方， 復現(xiàn)或者嘗試重寫進行舉一反三 是加深 認知 和學習 更好的方式，光是看和閱讀領悟還是不夠的！
寫了個練習用的小工具，可以用來快捷的生成Vue模板頁面
以上就是Create vite理解Vite項目創(chuàng)建流程及代碼實現(xiàn)的詳細內容，更多關于Create vite 項目創(chuàng)建流程的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要介紹了vue?change阻止默認事件問題,使用事件 @click.stop.native.prevent 解決 (使用@click.stop 或者 @click.prevent都無效，直接報錯還阻止不了事件)，需要的朋友可以參考下2022-01-01
這篇文章主要介紹了Vue+Mock.js模擬登錄和表格的增刪改查功能,需要的朋友可以參考下2018-07-07
vue修改數(shù)據(jù)的時候,表單值回顯不正確問題及解決
這篇文章主要介紹了vue修改數(shù)據(jù)的時候，表單值回顯不正確的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-11-11
element?ui動態(tài)側邊菜單欄及頁面布局實現(xiàn)方法
后臺管理系統(tǒng)經(jīng)常會使用到一個左側菜單欄,右側Tab頁的頁面顯示結構,這篇文章主要給大家介紹了關于element?ui動態(tài)側邊菜單欄及頁面布局實現(xiàn)的相關資料,需要的朋友可以參考下2023-09-09
這篇文章主要給大家介紹了關于npm踩坑問題的相關資料,文中通過實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2022-03-03
這篇文章主要為大家詳細介紹了Vue如何結合Element實現(xiàn)頁面生成快照截圖功能,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-03-03
V部落是一個多用戶博客管理平臺。這篇文章主要介紹了Vue+SpringBoot開發(fā)V部落博客管理平臺,需要的朋友可以參考下2017-12-12
vue+d3js+fastapi實現(xiàn)天氣柱狀圖折線圖餅圖的示例
本文主要介紹了vue+d3js+fastapi實現(xiàn)天氣柱狀圖折線圖餅圖的示例,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2025-04-04
Vue+Element+Springboot圖片上傳的實現(xiàn)示例
最近在學習前段后分離，本文介紹了Vue+Element+Springboot圖片上傳的實現(xiàn)示例，具有一定的參考價值，感興趣的可以了解一下2021-11-11
這篇文章主要介紹了Vue 指令實現(xiàn)按鈕級別權限管理功能，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04