npm init vue@next -> npx create-vue@next
npm init @harexs -> npx @harexs/create
npm init @harexs/test -> npx @harexs/create-test

{
      "name": "create-vue",
      "version": "3.3.4",
      "description": "An easy way to start a Vue project",
      "type": "module",
      "bin": {
        "create-vue": "outfile.cjs" //關(guān)鍵
      }
  }

//index.js
async function init() {
 ///
}
init().catch((e) => {
  console.error(e)
})

const cwd = process.cwd() //獲取當(dāng)前運(yùn)行環(huán)境項(xiàng)目目錄
//process.argv.slice(2) 用來獲取 npx create-vue 后面?zhèn)魅氲膮?shù) 值為數(shù)組
//minimist 用來格式化獲取傳入的參數(shù)
const argv = minimist(process.argv.slice(2), {
    alias: {
      typescript: ['ts'],
      'with-tests': ['tests', 'cypress'],
      router: ['vue-router']
    },
    // all arguments are treated as booleans
    boolean: true
  })
  //通過minimist獲取的argv結(jié)果是個對象，通過對象屬性去判斷 是否有傳入?yún)?shù)
  const isFeatureFlagsUsed =
    typeof (argv.default || argv.ts || argv.jsx || argv.router || argv.vuex || argv.tests) ===
    'boolean'
  //argv._ 這個_ 屬性獲取的是 沒有-或者--開頭的參數(shù) 
  //比如 npm init create-vue xxx --a 那么argv就是 {_:['xxx'],a:true}
  let targetDir = argv._[0] // argv._[0] 假如對應(yīng){_:['xxx'],a:true} 就是 xxx
  //給一會的選項(xiàng)用的 默認(rèn)項(xiàng)目名稱 defaultProjectName 默認(rèn)取targetDir
  const defaultProjectName = !targetDir ? 'vue-project' : targetDir
  const forceOverwrite = argv.force

try {
result = await prompts(
      [
        {
        //name 參數(shù)就是一會要收集的對應(yīng)變量
          name: 'projectName',
          //判斷targetDir 有沒有值 有值的話 就是null  null會跳過這個對話
          type: targetDir ? null : 'text',
          message: 'Project name:',
          initial: defaultProjectName, //默認(rèn)結(jié)果值 獲取參數(shù)部分已經(jīng)說過這個變量了
          //onState 完成回調(diào)，讓targetDir 取 用戶輸入的內(nèi)容 沒輸入直接回車的話 取defaultProjectName
          onState: (state) => (targetDir = String(state.value).trim() || defaultProjectName)
        },
        {
          name: 'shouldOverwrite',
          //canSafelyOverwrite 判斷是否是空目錄并可以寫入 否則判斷有沒有參數(shù)--force 目錄
          // 有一個條件有效就為null 就跳過寫入對話， 否則為confirm 確認(rèn)框 y/n 
          type: () => (canSafelyOverwrite(targetDir) || forceOverwrite ? null : 'confirm'),
          message: () => {
          //提示文本
            const dirForPrompt =
              targetDir === '.' ? 'Current directory' : `Target directory "${targetDir}"`
            return `${dirForPrompt} is not empty. Remove existing files and continue?`
          }
        },
        {
          name: 'overwriteChecker',
          //檢查是否寫入， type這里的函數(shù) prev 是上一個選項(xiàng)的值， values 是整個對象
          //如果 shouldOverwrite 階段 type變?yōu)? confirm  并且還選了 no 
          //那么這一階段判斷后就會直接退出 不再執(zhí)行 拋出異常
          type: (prev, values = {}) => {
            if (values.shouldOverwrite === false) {
              throw new Error(red('?') + ' Operation cancelled')
            }
            return null
          }
        },
        {
          name: 'packageName',
          //正則驗(yàn)證 是否符合 package.json name 的值,不符合則讓用戶輸入
          type: () => (isValidPackageName(targetDir) ? null : 'text'),
          message: 'Package name:',
          //沒輸入則取默認(rèn)值 將targetDir 通過函數(shù)轉(zhuǎn)換為符合packageName的格式
          initial: () => toValidPackageName(targetDir),
          //校驗(yàn)函數(shù)，如果 用戶輸入的包名無法通過 則提示Invalid package.json name 重新輸入
          validate: (dir) => isValidPackageName(dir) || 'Invalid package.json name'
        },
        {
          name: 'needsTypeScript',
          type: () => (isFeatureFlagsUsed ? null : 'toggle'),
          message: 'Add TypeScript?',
          initial: false,
          active: 'Yes',
          inactive: 'No'
        },
        {
          name: 'needsJsx',
          type: () => (isFeatureFlagsUsed ? null : 'toggle'),
          message: 'Add JSX Support?',
          initial: false,
          active: 'Yes',
          inactive: 'No'
        },
        {
          name: 'needsRouter'
          //toggle 和confirm 無異  isFeatureFlagsUsed 如果有指定某一參數(shù) 則跳過后面所有對話,
          type: () => (isFeatureFlagsUsed ? null : 'toggle'),
          message: 'Add Vue Router for Single Page Application development?',
          initial: false,
          active: 'Yes',
          inactive: 'No'
        },
        {
          name: 'needsVuex',
          type: () => (isFeatureFlagsUsed ? null : 'toggle'),
          message: 'Add Vuex for state management?',
          initial: false,
          active: 'Yes',
          inactive: 'No'
        },
        {
          name: 'needsTests',
          type: () => (isFeatureFlagsUsed ? null : 'toggle'),
          message: 'Add Cypress for testing?',
          initial: false,
          active: 'Yes',
          inactive: 'No'
        }
      ],
      {
        onCancel: () => {
          throw new Error(red('?') + ' Operation cancelled')
        }
      }
    )
  } catch (cancelled) {
    console.log(cancelled.message)
    process.exit(1)
  }

//取出前面對話選項(xiàng)后的值， 如果沒有的話 就取 argv上的默認(rèn)值
const {
    packageName = toValidPackageName(defaultProjectName),
    shouldOverwrite,
    needsJsx = argv.jsx,
    needsTypeScript = argv.typescript,
    needsRouter = argv.router,
    needsVuex = argv.vuex,
    needsTests = argv.tests
  } = result
   //root為 命令運(yùn)行位置 + targetDir 得到 項(xiàng)目路徑
  const root = path.join(cwd, targetDir)
  //如果之前判斷的文件目錄可寫入 則執(zhí)行一次emptyDir
  if (shouldOverwrite) {
    emptyDir(root)
     // 再判斷目錄不存在則創(chuàng)建這個目錄
  } else if (!fs.existsSync(root)) {
    fs.mkdirSync(root)
  }
  console.log(`\nScaffolding project in ${root}...`)
  const pkg = { name: packageName, version: '0.0.0' }
    //往root目錄  寫入初始化 package.json文件
  fs.writeFileSync(path.resolve(root, 'package.json'), JSON.stringify(pkg, null, 2))

function emptyDir(dir) {
  postOrderDirectoryTraverse(
    dir,
    (dir) => fs.rmdirSync(dir),
    (file) => fs.unlinkSync(file)
  )
}

export function postOrderDirectoryTraverse(dir, dirCallback, fileCallback) {
  //fs.readdirSync(dir) 返回一個數(shù)組 包含當(dāng)前目錄下的文件名 列表
  for (const filename of fs.readdirSync(dir)) {
    //遍歷列表 得到 文件的完整路徑
    const fullpath = path.resolve(dir, filename)
    if (fs.lstatSync(fullpath).isDirectory()) {
      // 如果這個文件 也是個目錄 則遞歸繼續(xù)遍歷
      //因?yàn)閯h除目錄的話 必須要先刪除所有文件
      postOrderDirectoryTraverse(fullpath, dirCallback, fileCallback)
      //執(zhí)行記dirCallback 回調(diào) 也就是fs.rmdirSync(dir) 移除目錄
      dirCallback(fullpath)
      continue
    }
    //否則調(diào)用第二個回調(diào) 就是移除文件
    fileCallback(fullpath)
  }
}

const templateRoot = path.resolve(__dirname, 'template')
  const render = function render(templateName) {
    const templateDir = path.resolve(templateRoot, templateName)
    renderTemplate(templateDir, root)
  }
  // Render base template
  render('base')
  // Add configs.
  if (needsJsx) {
    render('config/jsx')
  }
  if (needsRouter) {
    render('config/router')
  }
  if (needsVuex) {
    render('config/vuex')
  }
  if (needsTests) {
    render('config/cypress')
  }
  if (needsTypeScript) {
    render('config/typescript')
  }
   // Render code template.
  // prettier-ignore
  const codeTemplate =
    (needsTypeScript ? 'typescript-' : '') +
    (needsRouter ? 'router' : 'default')
  render(`code/${codeTemplate}`)
  // Render entry file (main.js/ts).
  if (needsVuex && needsRouter) {
    render('entry/vuex-and-router')
  } else if (needsVuex) {
    render('entry/vuex')
  } else if (needsRouter) {
    render('entry/router')
  } else {
    render('entry/default')
  }

// work around the esbuild issue that `import.meta.url` cannot be correctly transpiled
  // when bundling for node and the format is cjs
  // const templateRoot = new URL('./template', import.meta.url).pathname
  const templateRoot = path.resolve(__dirname, 'template')
  //需要區(qū)分的是  templateDir取的是 對應(yīng)當(dāng)前執(zhí)行文件環(huán)境中的文件地址
  // root變量 path.join(cwd, targetDir) process.cwd() 也就是取的命令執(zhí)行時的地址
  //到時候?qū)?yīng)的可能就是這樣:
  //C:xxx/xxxx/npm-cache/_npx/xxxx/.bin/create-vue/template  
  //D:/xxx/projectDir/vue-project 
const render = function render(templateName) {
    const templateDir = path.resolve(templateRoot, templateName)
    renderTemplate(templateDir, root)
  }

import path from "node:path";
import url from "node:url";
const __filename = url.fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
console.log(__filename, __dirname);

function renderTemplate(src, dest) {
//src  是 npx拉取到create-vue本地緩存目錄中的 模板目錄地址
//dest 是 用戶命令執(zhí)行時的 項(xiàng)目地址
  const stats = fs.statSync(src)
  //statSync 返回一個文件類對象 可以看下面的截圖
  if (stats.isDirectory()) {
    // if it's a directory, render its subdirectories and files recusively
    //如果src 是一個目錄  則 在對應(yīng)dest 的位置創(chuàng)建一個目錄 
    //recursive: true 允許遞歸創(chuàng)建目錄 也就是允許 a/b/c 這種形式來創(chuàng)建
    fs.mkdirSync(dest, { recursive: true })
    for (const file of fs.readdirSync(src)) {
     //遍歷src中所有文件， 遞歸自身，傳入的參數(shù)變?yōu)?src/file 也即是每個文件名
      //第二個參數(shù) 對應(yīng)的就是 dest/file
      renderTemplate(path.resolve(src, file), path.resolve(dest, file))
    }
    return
  }
   //這一步就是循環(huán)遍歷 將src中的每個文件包目錄都寫入到 我們聲明的project(dest)項(xiàng)目中
    //如果src不是一個目錄 則來到這里 先取出文件名
  const filename = path.basename(src)
    //判斷文件名是否為 package.json 并且 dest 也對應(yīng)存在這個文件
  if (filename === 'package.json' && fs.existsSync(dest)) {
    // merge instead of overwriting
    //讀取兩個package.json的內(nèi)部
    const existing = JSON.parse(fs.readFileSync(dest))
    const newPackage = JSON.parse(fs.readFileSync(src))
     //合并兩個文件的內(nèi)并 并重新排序  得到新的 package.json內(nèi)容
    const pkg = sortDependencies(deepMerge(existing, newPackage))
    //重新寫入到 dest下
    fs.writeFileSync(dest, JSON.stringify(pkg, null, 2) + '\n')
    return
  }
  if (filename.startsWith('_')) {
    // rename `_file` to `.file`
    //resolve 合并名字
    //dirname 取目錄名字
    dest = path.resolve(path.dirname(dest), filename.replace(/^_/, '.'))
  }
//拷貝文件
  fs.copyFileSync(src, dest)
}

//判斷是不是對象
const isObject = (val) => val && typeof val === 'object'
//合并數(shù)組值 通過new Set 去除重復(fù)項(xiàng)
const mergeArrayWithDedupe = (a, b) => Array.from(new Set([...a, ...b]))
/**
 * Recursively merge the content of the new object to the existing one
 * @param {Object} target the existing object
 * @param {Object} obj the new object
 */
function deepMerge(target, obj) {
  for (const key of Object.keys(obj)) {
    const oldVal = target[key]
    const newVal = obj[key]
    if (Array.isArray(oldVal) && Array.isArray(newVal)) {
      //合并數(shù)組項(xiàng)
      target[key] = mergeArrayWithDedupe(oldVal, newVal)
    } else if (isObject(oldVal) && isObject(newVal)) {
      //如果是對象則遞歸自身 繼續(xù)遍歷
      target[key] = deepMerge(oldVal, newVal)
    } else {
      //否則直接覆蓋值
      target[key] = newVal
    }
  }
  return target
}
export default deepMerge

export default function sortDependencies(packageJson) {
  // packageJson json的內(nèi)容對象
  // sorted排序字段
  const sorted = {}
  //需要排序的類型
  const depTypes = ['dependencies', 'devDependencies', 'peerDependencies', 'optionalDependencies']
  for (const depType of depTypes) {
    //如果json中包含了 這個字段
    if (packageJson[depType]) {
      //賦值sorted對應(yīng)的 depType 為空對象
      sorted[depType] = {}
      Object.keys(packageJson[depType]) //得到packageJson depType所有key的數(shù)組
        .sort() //使用默認(rèn)排序
        .forEach((name) => {
          //遍歷這個key的數(shù)組  然后將對應(yīng)的值 重新賦值到sorted depType name
          sorted[depType][name] = packageJson[depType][name]
        })
    }
  }
  //ES6 展開對象語法 重復(fù)的key 會被覆蓋 達(dá)到排序的效果  
  return {
    ...packageJson,
    ...sorted
  }
}

 // Add configs.
  if (needsJsx) {
    render('config/jsx')
  }
  if (needsRouter) {
    render('config/router')
  }
  if (needsVuex) {
    render('config/vuex')
  }
  if (needsTests) {
    render('config/cypress')
  }
  if (needsTypeScript) {
    render('config/typescript')
  }
  // Render code template.
  // prettier-ignore
  const codeTemplate =
    (needsTypeScript ? 'typescript-' : '') +
    (needsRouter ? 'router' : 'default')
  render(`code/${codeTemplate}`)
  // Render entry file (main.js/ts).
  if (needsVuex && needsRouter) {
    render('entry/vuex-and-router')
  } else if (needsVuex) {
    render('entry/vuex')
  } else if (needsRouter) {
    render('entry/router')
  } else {
    render('entry/default')
  }

 if (needsTypeScript) {
    // rename all `.js` files to `.ts`
    // rename jsconfig.json to tsconfig.json
    //前面說過 preOrderDirectoryTraverse函數(shù)，前面是通過遍歷的形式 去移除文件和目錄
    //這里的調(diào)用只傳入第二個參數(shù)就是針對非目錄的文件
    preOrderDirectoryTraverse(
      root,
      () => {},
      (filepath) => {
        //看作者的注釋也很好理解，遇到.js結(jié)尾文件 重寫為ts
        if (filepath.endsWith('.js')) {
          fs.renameSync(filepath, filepath.replace(/\.js$/, '.ts'))
          //遇到j(luò)sconfig.json 重寫為 tsconfig.json
        } else if (path.basename(filepath) === 'jsconfig.json') {
          fs.renameSync(filepath, filepath.replace(/jsconfig\.json$/, 'tsconfig.json'))
        }
      }
    )
    // Rename entry in `index.html
    //取到 index.html 文件路徑
    const indexHtmlPath = path.resolve(root, 'index.html')
    //通過utf-8 讀取 文件內(nèi)容
    const indexHtmlContent = fs.readFileSync(indexHtmlPath, 'utf8')
    //將原本引用的 main.js 重寫為 main.ts  這里也很好理解
    fs.writeFileSync(indexHtmlPath, indexHtmlContent.replace('src/main.js', 'src/main.ts'))
  }

export function preOrderDirectoryTraverse(dir, dirCallback, fileCallback) {
  for (const filename of fs.readdirSync(dir)) {
    //遍歷dir
    const fullpath = path.resolve(dir, filename)
    if (fs.lstatSync(fullpath).isDirectory()) {
      dirCallback(fullpath)
      //如果是目錄 則 調(diào)用dirCallback
      // in case the dirCallback removes the directory entirely
      //執(zhí)行完后再判斷 目錄是否還存在 再遞歸自身繼續(xù)調(diào)用
      if (fs.existsSync(fullpath)) {
        preOrderDirectoryTraverse(fullpath, dirCallback, fileCallback)
      }
      continue
    }
    fileCallback(fullpath)
  }
}

 if (!needsTests) {
    // All templates assumes the need of tests.
    // If the user doesn't need it:
    // rm -rf cypress **/__tests__/
    preOrderDirectoryTraverse(
      root,
      (dirpath) => {
        //對于目錄 得到目錄名
        const dirname = path.basename(dirpath)
        //如果目錄名為cypress || __tests__
        if (dirname === 'cypress' || dirname === '__tests__') {
          emptyDir(dirpath) //執(zhí)行 清空目錄操作
          fs.rmdirSync(dirpath) //最后移除這個目錄
        }
      },
      () => {}
    )
  }

  //通過npm_execpath來獲取當(dāng)前執(zhí)行的包管理器絕對路徑
  //得到路徑后 通過 關(guān)鍵 字符去匹配
  const packageManager = /pnpm/.test(process.env.npm_execpath)
    ? 'pnpm'
    : /yarn/.test(process.env.npm_execpath)
    ? 'yarn'
    : 'npm'
  // README generation
  //生產(chǎn)README  generateReadme 也比較簡單不展開講它了
  fs.writeFileSync(
    path.resolve(root, 'README.md'),
    generateReadme({
      projectName: result.projectName || defaultProjectName,
      packageManager,
      needsTypeScript,
      needsTests
    })
  )
  console.log(`\nDone. Now run:\n`)
  if (root !== cwd) {
    console.log(`  ${bold(green(`cd ${path.relative(cwd, root)}`))}`)
  }
  console.log(`  ${bold(green(getCommand(packageManager, 'install')))}`)
  console.log(`  ${bold(green(getCommand(packageManager, 'dev')))}`)
  console.log()