create?vite?實(shí)例源碼解析

更新時間：2022年11月27日 09:22:31 作者：田八

這篇文章主要為大家介紹了create?vite?實(shí)例源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

代碼結(jié)構(gòu)

create-vite的源碼很簡單，只有一個文件，代碼總行數(shù)400左右，但是實(shí)際需要閱讀的代碼大約只有200行左右，廢話不多說，直接開始吧。

create-vite的代碼結(jié)構(gòu)非常簡單，直接將index.ts拉到最底下，發(fā)現(xiàn)只執(zhí)行了一個函數(shù)init()：

init().catch((e) => {
  console.error(e)
})

我們的故事將從這里開始。

init()

init()函數(shù)的代碼有點(diǎn)長，但是實(shí)際上也不復(fù)雜，我們先來看看它最開頭的兩行代碼：

async function init() {
  const argTargetDir = formatTargetDir(argv._[0])
  const argTemplate = argv.template || argv.t
}

首先可以看到init函數(shù)是一個異步函數(shù)，最開始的兩行代碼分別獲取了argv._[0]和argv.template或者argv.t；

這個argv是怎么來的，當(dāng)然是通過一個解析包來解析的，在頂部有這樣的一段代碼：

const argv = minimist(process.argv.slice(2), { string: ['_'] })

就是這個minimist包，它的作用就是解析命令行參數(shù)，感興趣的可以自行了解，據(jù)說這個包也是百來行代碼。

繼續(xù)往下，這兩個參數(shù)就是我們在執(zhí)行create-vite命令時傳入的參數(shù)，比如：

create-vite my-vite-app

那么argv._[0]就是my-vite-app；

如果我們執(zhí)行的是：

create-vite my-vite-app --template vue

那么argv.template就是vue。

argv.t就是argv.template的簡寫，相當(dāng)于：

create-vite my-vite-app --t vue
# 等價于
create-vite my-vite-app --template vue

通過打斷點(diǎn)的方式，可以看到結(jié)果和我們預(yù)想的一樣。

formatTargetDir(argv._[0])就是格式化我們傳入的目錄，它會去掉目錄前后的空格和最后的/，比如：

formatTargetDir(' my-vite-app ') // my-vite-app
formatTargetDir(' my-vite-app/') // my-vite-app

這個代碼很簡單，就不貼出來了，繼續(xù)往下：

let targetDir = argTargetDir || defaultTargetDir

targetDir是我們最終要創(chuàng)建的目錄，defaultTargetDir的值是vite-project，如果我們沒有傳將會用這個值來兜底。

緊接著后面跟著一個getProjectName的函數(shù)，通常來講這種代碼可以跳過先不看，但是這里的getProjectName函數(shù)有點(diǎn)特殊;

const getProjectName = () =>
  targetDir === '.' ? path.basename(path.resolve()) : targetDir

它會根據(jù)targetDir的值來判斷我們的項(xiàng)目是不是在當(dāng)前目錄下創(chuàng)建的，如果是的話，就會返回當(dāng)前目錄的名字，比如：

create-vite .

可以看到如果項(xiàng)目名稱傳的是.，那么getProjectName函數(shù)就會返回當(dāng)前目錄的名字，也就是create-vite（根據(jù)自己的情況而定）；

不看源碼還真不知道這里還可以這么用，繼續(xù)往下，就是定義了一個問題數(shù)組：

result = await prompts([])

這個prompts函數(shù)是一個交互式命令行工具，它會根據(jù)我們傳入的問題數(shù)組來進(jìn)行交互，就比如源碼中，一共列出了6個問題：

projectName：項(xiàng)目名稱
overwrite：是否覆蓋已存在的目錄
overwriteChecker：檢測覆蓋的目錄是否為空
packageName：包名
framework：框架
variant：語言

當(dāng)執(zhí)行create-vite命令時，后面不跟著任何參數(shù)，而且我們一切操作都是合規(guī)的，那么只會經(jīng)歷三個問題：

projectName：項(xiàng)目名稱
framework：框架
variant：語言

projectName：項(xiàng)目名稱

配置項(xiàng)如下：

var projectName = {
  type: argTargetDir ? null : 'text',
  name: 'projectName',
  message: reset('Project name:'),
  initial: defaultTargetDir,
  onState: (state) => {
    targetDir = formatTargetDir(state.value) || defaultTargetDir
  }
}

先來簡單介紹一個每一個配置項(xiàng)的含義：

type：問題的類型，這里的null表示不需要用戶輸入，直接跳過這個問題，這個配置項(xiàng)的值可以是text、select、confirm等，具體可以看這里；
name：問題的名稱，這里的projectName是用來在prompts函數(shù)的返回值中獲取這個問題的答案的；
message：問題的描述，這里的Project name:是用來在命令行中顯示的；
initial：問題的默認(rèn)值，這里的defaultTargetDir是用來在命令行中顯示的；
onState：問題的回調(diào)函數(shù)，每次用戶輸入的時候都會觸發(fā)這個函數(shù)，這里的state就是用戶輸入的值；

可以看到這里的type配置是根據(jù)argTargetDir的值來決定的，如果argTargetDir有值，那么就會跳過這個問題，直接使用argTargetDir的值作為項(xiàng)目名稱；

如果在使用create-vite命令時，后面跟著了項(xiàng)目名稱，那么argTargetDir就有值了，也就是會跳過這個問題，后面的屬性就沒什么好分析了，接著往下。

overwrite：是否覆蓋已存在的目錄

配置項(xiàng)如下：

var overwrite = {
  type: () =>
    !fs.existsSync(targetDir) || isEmpty(targetDir) ? null : 'confirm',
  name: 'overwrite',
  message: () =>
    (targetDir === '.'
      ? 'Current directory'
      : `Target directory "${targetDir}"`) +
    ` is not empty. Remove existing files and continue?`
}

這里的type配置項(xiàng)是一個函數(shù)，這個函數(shù)的返回值是null或者confirm；

如果targetDir目錄不存在，或者targetDir目錄下面沒有東西，那么就會跳過這個問題，直接使用null作為type的值；

message配置項(xiàng)也是一個函數(shù)，這個函數(shù)的返回值是一個字符串，這個字符串就是在命令行中顯示的內(nèi)容；

同樣因?yàn)槿诵曰目紤]，會顯示不同的提示語來幫助用戶做出選擇；

overwriteChecker：檢測覆蓋的目錄是否為空

配置項(xiàng)如下：

var overwriteChecker = {
  type: (_, {overwrite}: { overwrite?: boolean }) => {
    if (overwrite === false) {
      throw new Error(red('?') + ' Operation cancelled')
    }
    return null
  },
  name: 'overwriteChecker'
}

overwriteChecker會在overwrite問題之后執(zhí)行，這里的type配置項(xiàng)是一個函數(shù)，里面接收了兩個參數(shù)；

第一個參數(shù)名為_，通常這種行為是占位的，表示這個參數(shù)沒有用到，但是又不能省略；

第二個參數(shù)是一個對象，這個對象里面有一個overwrite屬性，這個屬性就是overwrite問題的答案；

他通過overwrite的值來判斷用戶是否選擇了覆蓋，如果選擇了覆蓋，就會跳過這個問題;

否則的話就證明這個目錄下面存在文件，那么就會拋出一個錯誤，這里拋出錯誤是會終止整個命令的執(zhí)行的；

這一部分，在定義問題數(shù)組的時候有做處理，使用try...catch來捕獲錯誤，如果有錯誤，就會使用return來終止整個命令的執(zhí)行；

try {
  result = await prompts([])
} catch (cancelled: any) {
  console.log(cancelled.message)
  return
}

packageName：包名

配置項(xiàng)如下：

var packageName = {
  type: () => (isValidPackageName(getProjectName()) ? null : 'text'),
  name: 'packageName',
  message: reset('Package name:'),
  initial: () => toValidPackageName(getProjectName()),
  validate: (dir) =>
    isValidPackageName(dir) || 'Invalid package.json name'
}

這里的type配置項(xiàng)是一個函數(shù)，里面通過isValidPackageName來判斷項(xiàng)目名稱是否是一個合法的包名；

getProjectName在上面已經(jīng)介紹過了，這里就不再贅述；

isValidPackageName是用來判斷包名是否合法的，這個函數(shù)的實(shí)現(xiàn)如下：

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

validate用來驗(yàn)證用戶輸入的內(nèi)容是否合法，如果不合法，就會顯示Invalid package.json name；

framework：框架

配置項(xiàng)如下：

var framework =  {
  type:
    argTemplate && TEMPLATES.includes(argTemplate) ? null : 'select',
  name: 'framework',
  message:
    typeof argTemplate === 'string' && !TEMPLATES.includes(argTemplate)
      ? reset(
        `"${argTemplate}" isn't a valid template. Please choose from below: `
      )
      : reset('Select a framework:'),
  initial: 0,
  choices: FRAMEWORKS.map((framework) => {
    const frameworkColor = framework.color
    return {
      title: frameworkColor(framework.display || framework.name),
      value: framework
    }
  })
}

這里的就相對來說復(fù)雜了點(diǎn)，首先判斷了argTemplate是否存在，如果存在，就會判斷argTemplate是否是一個合法的模板；

TEMPLATES的定義是通過FRAMEWORKS來生成的：

const TEMPLATES = FRAMEWORKS.map((f) => {
    const variants = f.variants || [];
    const names = variants.map((v) => v.name);
    return names.length ? names : [f.name];
  }).reduce((a, b) => a.concat(b), [])

這里我將代碼拆分了一下，這樣看著會更清晰一點(diǎn)，最后的reduce的作用應(yīng)該是對值進(jìn)行一個拷貝處理；

源碼里面的map返回的都是引用值，所以需要進(jìn)行拷貝（這是我猜測的），源碼如下：

const TEMPLATES = FRAMEWORKS.map(
  (f) => (f.variants && f.variants.map((v) => v.name)) || [f.name]
).reduce((a, b) => a.concat(b), [])

FRAMEWORKS是寫死的一個數(shù)組，代碼很長，就不貼出來了，這里就貼一下type的定義：

type Framework = {
  name: string
  display: string
  color: ColorFunc
  variants: FrameworkVariant[]
}
type FrameworkVariant = {
  name: string
  display: string
  color: ColorFunc
  customCommand?: string
}

name是框架的名稱；
display是顯示的名稱；
color是顏色；
variants是框架的語言，比如react有typescript和javascript兩種語言；
customCommand是自定義的命令，比如vue的vue-cli就是自定義的命令；

分析到這里，再回頭看看framework的配置項(xiàng)，就很好理解了，這里的choices就是通過FRAMEWORKS來生成的：

var framework = {
  choices: FRAMEWORKS.map((framework) => {
    const frameworkColor = framework.color
    return {
      title: frameworkColor(framework.display || framework.name),
      value: framework
    }
  })
}

choices是一個數(shù)組，用于表示type為select時的選項(xiàng)，數(shù)組的每一項(xiàng)都是一個對象，對象的title是顯示的名稱，value是選中的值；

上面的代碼就是用來生成choices的，frameworkColor是一個顏色函數(shù)，用來給framework.display或者framework.name上色；

variant：語言

配置項(xiàng)如下：

var variant = {
  type: (framework: Framework) =>
    framework && framework.variants ? 'select' : null,
  name: 'variant',
  message: reset('Select a variant:'),
  choices: (framework: Framework) =>
    framework.variants.map((variant) => {
      const variantColor = variant.color
      return {
        title: variantColor(variant.display || variant.name),
        value: variant.name
      }
    })
}

這里的type是一個函數(shù)，函數(shù)的第一個參數(shù)就是framework，這里的type是根據(jù)framework來判斷的，如果framework存在并且framework.variants存在，就讓用戶繼續(xù)這一個問題。

通過之前的分析，這一塊應(yīng)該都能看明白，就繼續(xù)往下走；

獲取用戶輸入

接著往下走就是獲取用戶輸入了，用戶回答完所有問題后，結(jié)果會返回到result中，可以用過解構(gòu)的方式來獲?。?/p>

const { framework, overwrite, packageName, variant } = result

清空目錄

接著就是對生成項(xiàng)目的位置進(jìn)行處理，根據(jù)上面分析的邏輯，會有目錄下有文件的情況，所以需要先清空目錄：

// 確定項(xiàng)目生成的目錄
const root = path.join(cwd, targetDir)
// 清空目錄
if (overwrite) {
  emptyDir(root)
} else if (!fs.existsSync(root)) {
  fs.mkdirSync(root, {recursive: true})
}

emptyDir是一個清空目錄的方法，fs.existsSync是用來判斷目錄是否存在的，如果不存在就創(chuàng)建一個；

function emptyDir(dir: string) {
    // 如果目錄不存在，啥也不管
  if (!fs.existsSync(dir)) {
    return
  }
  // 讀取目錄下的所有文件
  for (const file of fs.readdirSync(dir)) {
      // 忽略 .git 的目錄
    if (file === '.git') {
      continue
    }
    // 刪除文件，如果是目錄就遞歸刪除
    fs.rmSync(path.resolve(dir, file), { recursive: true, force: true })
  }
}

existsSync第二個參數(shù)是一個對象，recursive表示是否遞歸創(chuàng)建目錄，如果目錄不存在，就會創(chuàng)建目錄，如果目錄存在，就會報錯；

生成項(xiàng)目

繼續(xù)往下走，就是生成項(xiàng)目相關(guān)的，最開始肯定是確定項(xiàng)目的內(nèi)容。

確定項(xiàng)目模板

// 確定項(xiàng)目模板
const template: string = variant || framework?.name || argTemplate

這里的template就是項(xiàng)目的模板，如果用戶選擇了variant，那么就用variant，如果沒有選擇，就用framework，如果framework不存在，就用argTemplate；

這些變量代表什么，從哪來的上面都有分析。

確定包管理器

const pkgInfo = pkgFromUserAgent(process.env.npm_config_user_agent)

這里的process.env.npm_config_user_agent并不是我們自己定義的，是npm自己定義的;

這個變量值是指的當(dāng)前運(yùn)行環(huán)境的包管理器，比如npm，yarn等等，當(dāng)然這個值肯定沒我寫的這么簡單;

通過debug可以看到我的值是pnpm/7.17.0 npm/? node/v14.19.2 win32 x64，每個人的值根據(jù)環(huán)境的不同而不同；

pkgFromUserAgent是一個解析userAgent的方法，大白話就是解析包管理器的名稱和版本號；

例如{name: 'npm', version: '7.17.0'}，代碼如下：

function pkgFromUserAgent(userAgent: string | undefined) {
  if (!userAgent) return undefined
  const pkgSpec = userAgent.split(' ')[0]
  const pkgSpecArr = pkgSpec.split('/')
  return {
    name: pkgSpecArr[0],
    version: pkgSpecArr[1]
  }
}

這個代碼也沒那么高深，就是解析字符串，然后返回一個對象，給你寫也一定可以寫出來的；

后面兩段代碼就是正式確定包管理器的名稱和版本號了，代碼如下：

const pkgManager = pkgInfo ? pkgInfo.name : 'npm'
const isYarn1 = pkgManager === 'yarn' && pkgInfo?.version.startsWith('1.')

yarn的版本如果是1.x后面會有一些特殊處理，所以會有isYarn1這個變量；

接著就是確定包管理器的命令了，代碼如下：

 const { customCommand } =
    FRAMEWORKS.flatMap((f) => f.variants).find((v) => v.name === template) ?? {}

這一段是用來確定部分模板的包管理器命令的，比如vue-cli，vue-cli的包管理器命令是vue，會有不一樣的命令；

if (customCommand) {
  const fullCustomCommand = customCommand
    .replace('TARGET_DIR', targetDir)
    .replace(/^npm create/, `${pkgManager} create`)
    // Only Yarn 1.x doesn't support `@version` in the `create` command
    .replace('@latest', () => (isYarn1 ? '' : '@latest'))
    .replace(/^npm exec/, () => {
      // Prefer `pnpm dlx` or `yarn dlx`
      if (pkgManager === 'pnpm') {
        return 'pnpm dlx'
      }
      if (pkgManager === 'yarn' && !isYarn1) {
        return 'yarn dlx'
      }
      // Use `npm exec` in all other cases,
      // including Yarn 1.x and other custom npm clients.
      return 'npm exec'
    })
  const [command, ...args] = fullCustomCommand.split(' ')
  const {status} = spawn.sync(command, args, {
    stdio: 'inherit'
  })
  process.exit(status ?? 0)
}

這里的處理代碼比較多，但是也沒什么好看的，就是各種替換字符串，然后生成最終的命令；

正式生成項(xiàng)目

接下來就是重點(diǎn)了，首先確定模板的位置，代碼如下：

const templateDir = path.resolve(
  fileURLToPath(import.meta.url),
  '../..',
  `template-${template}`
)

這里的import.meta.url是當(dāng)前ES模塊的絕對路徑，這里是一個知識點(diǎn)。

import大家都知道是用來導(dǎo)入模塊的，但是import.meta是什么呢？

import.meta是一個對象，它的屬性和方法提供了有關(guān)模塊的信息，比如url就是當(dāng)前模塊的絕對路徑；

同時他還允許在模塊中添加自定義的屬性，比如import.meta.foo = 'bar'，這樣就可以在模塊中使用import.meta.foo了；

所以我們在vite項(xiàng)目中可以使用import.meta.env來獲取環(huán)境變量，比如import.meta.env.MODE就是當(dāng)前的模式；

點(diǎn)到為止，我們繼續(xù)看代碼，這一段就是確定模板的位置，應(yīng)該都看的懂；

后面就是讀取模板文件，然后生成項(xiàng)目了，代碼如下：

const files = fs.readdirSync(templateDir)
// package.json 不需要寫進(jìn)去
for (const file of files.filter((f) => f !== 'package.json')) {
  write(file)
}

這里的write函數(shù)就是用來生成項(xiàng)目的，代碼如下：

const write = (file: string, content?: string) => {
  const targetPath = path.join(root, renameFiles[file] ?? file)
  if (content) {
    fs.writeFileSync(targetPath, content)
  } else {
    copy(path.join(templateDir, file), targetPath)
  }
}

根據(jù)上面的邏輯這個分析直接簡化為：

const write = (file: string) => {
  const targetPath = path.join(root, file)
  copy(path.join(templateDir, file), targetPath)
}

這個沒啥好說的，然后就到了copy函數(shù)的分析了，代碼如下：

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

這里的copy函數(shù)就是用來復(fù)制文件的，如果是文件夾就調(diào)用copyDir函數(shù)，代碼如下：

function copyDir(srcDir: string, destDir: string) {
  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)
  }
}

這里的fs.mkdirSync函數(shù)就是用來創(chuàng)建文件夾的，recursive參數(shù)表示如果父級文件夾不存在就創(chuàng)建父級文件夾；

這里的fs.readdirSync函數(shù)就是用來讀取文件夾的，返回一個數(shù)組，數(shù)組中的每一項(xiàng)就是文件夾中的文件名；

最后通過遞歸調(diào)用copy函數(shù)來復(fù)制文件夾中的文件；

創(chuàng)建package.json

接下來是對package.json文件的單獨(dú)處理，代碼如下：

// 獲取模板中的 package.json
const pkg = JSON.parse(
  fs.readFileSync(path.join(templateDir, `package.json`), 'utf-8')
)
// 修改 package.json 中的 name 值
pkg.name = packageName || getProjectName()
// 寫入 package.json
write('package.json', JSON.stringify(pkg, null, 2))

這里的pkg就是模板中的package.json文件，然后修改name字段，最后寫入到項(xiàng)目中；

之前不復(fù)制package.json是因?yàn)檫@里會修改name字段，如果復(fù)制了你的項(xiàng)目的name屬性就不正確。

完成

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()

最后就是一些提示信息，如果你的項(xiàng)目不在當(dāng)前目錄下，就會提示你cd到項(xiàng)目目錄下，然后根據(jù)你的包管理器來提示你安裝依賴和啟動項(xiàng)目。