源码学习目录

1. 前言

1.1 环境

  1. 操作系统: macOS 11.5.2
  2. 浏览器: Chrome 94.0.4606.81

  3. create-vue 3.0.1

    1.2 阅读该文章可以get以下知识点

  4. 学会全新的官方脚手架工具 create-vue 的使用和原理

  5. 学会使用 VSCode 直接打开 github 项目
  6. 学会使用测试用例调试源码

    2. 开始

    2.1 如何使用

    ```javascript // 安装vue3工程 npm init vue@3 // 安装vue2工程 npm init vue@2

// 通过输入下面的命令,可以看到npm 的用法 npm init -h
npm init [—force|-f|—yes|-y|—scope] npm init <@scope> (same as npx <@scope>/create) npm init [<@scope>/] (same as npx [<@scope>/]create-<name>)

npm init => npx create-vue 

  1. npx create-vue会去下载包,并执行bin里面的脚本<br />[npm init文档](https://docs.npmjs.com/cli/v6/commands/npm-init)
  2. <a name="t3FLa"></a>
  3. ## 2.2 index.js 引入的npm包
  4. ```javascript
  5. import fs from 'fs'
  6. import path from 'path'
  7. // 命令行args获取
  8. import minimist from 'minimist'
  9. // 交互式命令行
  10. import prompts from 'prompts'
  11. // 标准输入的颜色
  12. import { red, green, bold } from 'kolorist'

kolorist
minimist
prompts
这些常用库,基本用法都差不多,之前有讲过

2.3 index.js源码

  1. // 校验包名称
  2. function isValidPackageName(projectName) {
  3.   return /^(?:@[a-z0-9-*~][a-z0-9-*._~]*\/)?[a-z0-9-~][a-z0-9-._~]*$/.test(projectName)
  4. }
  5. // 将一些情况转义成中划线或删除
  6. function toValidPackageName(projectName) {
  7.   return projectName
  8.     .trim()
  9.     .toLowerCase()
  10.     .replace(/\s+/g, '-')
  11.     .replace(/^[._]/, '')
  12.     .replace(/[^a-z0-9-~]+/g, '-')
  13. }
  14. // 判断是否存在该目录
  15. function canSafelyOverwrite(dir) {
  16.   return !fs.existsSync(dir) || fs.readdirSync(dir).length === 0
  17. }
  18. // 清空文件和文件夹
  19. function emptyDir(dir) {
  20.   postOrderDirectoryTraverse(
  21.     dir,
  22.     (dir) => fs.rmdirSync(dir),
  23.     (file) => fs.unlinkSync(file)
  24.   )
  25. }
  27. async function init() {
  28.   // 脚本运行地址
  29.   const cwd = process.cwd()
  30.   // possible options:
  31.   // --default
  32.   // --typescript / --ts
  33.   // --jsx
  34.   // --router / --vue-router
  35.   // --pinia
  36.   // --with-tests / --tests / --cypress
  37.   // --force (for force overwriting)
  38.   // 参数
  39.   const argv = minimist(process.argv.slice(2), {
  40.     // 设置别名
  41.     alias: {
  42.       typescript: ['ts'],
  43.       'with-tests': ['tests', 'cypress'],
  44.       router: ['vue-router']
  45.     },
  46.     // all arguments are treated as booleans
  47.     // 参数处理成boolean
  48.     boolean: true
  49.   })
  51.   // if any of the feature flags is set, we would skip the feature prompts
  52.   // use `??` instead of `||` once we drop Node.js 12 support
  53.   // 这段代码的目的是如果传入了下面的这些参数,不需要进入prompt去设置了
  54.   const isFeatureFlagsUsed =
  55.     typeof (argv.default || argv.ts || argv.jsx || argv.router || argv.pinia || argv.tests) ===
  56.     'boolean'
  57.     // 目标目录
  58.   let targetDir = argv._[0]
  59.   // 默认工程名,存在目标文件夹使用文件夹名称,不存在使用vue-project
  60.   const defaultProjectName = !targetDir ? 'vue-project' : targetDir
  62.   // 强制写入
  63.   const forceOverwrite = argv.force
  65.   let result = {}
  67.   try {
  68.     // Prompts:
  69.     // - Project name:
  70.     //   - whether to overwrite the existing directory or not?
  71.     //   - enter a valid package name for package.json
  72.     // - Project language: JavaScript / TypeScript
  73.     // - Add JSX Support?
  74.     // - Install Vue Router for SPA development?
  75.     // - Install Pinia for state management?
  76.     // - Add Cypress for testing?
  77.     // 交互命令,生成配置
  78.     result = await prompts(
  79.       [
  80.          // 项目名称
  81.         {
  82.           name: 'projectName',
  83.           // 如果type=null是不会显示的
  84.           type: targetDir ? null : 'text',
  85.           message: 'Project name:',
  86.           initial: defaultProjectName,
  87.           onState: (state) => (targetDir = String(state.value).trim() || defaultProjectName)
  88.         },
  89.         // 是否覆盖
  90.         {
  91.           name: 'shouldOverwrite',
  92.           // 校验目标目录是否有效
  93.           type: () => (canSafelyOverwrite(targetDir) || forceOverwrite ? null : 'confirm'),
  94.           message: () => {
  95.             const dirForPrompt =
  96.               targetDir === '.' ? 'Current directory' : `Target directory "${targetDir}"`
  98.             return `${dirForPrompt} is not empty. Remove existing files and continue?`
  99.           }
  100.         },
  101.         // 覆盖检测,不覆盖,会抛出一下错误,直接阻塞后面的任务
  102.         {
  103.           name: 'overwriteChecker',
  104.           type: (prev, values = {}) => {
  105.             if (values.shouldOverwrite === false) {
  106.               throw new Error(red('✖') + ' Operation cancelled')
  107.             }
  108.             return null
  109.           }
  110.         },
  111.         // 包名称
  112.         {
  113.           name: 'packageName',
  114.           // 校验包名是否有效,自己实现的,没有用validate-npm-package-name这个库,减少项目依赖
  115.           type: () => (isValidPackageName(targetDir) ? null : 'text'),
  116.           message: 'Package name:',
  117.           initial: () => toValidPackageName(targetDir),
  118.           // 非法校验,如果校验不通过,不会执行到下一步
  119.           validate: (dir) => isValidPackageName(dir) || 'Invalid package.json name'
  120.         },
  121.         // ts
  122.         {
  123.           name: 'needsTypeScript',
  124.           type: () => (isFeatureFlagsUsed ? null : 'toggle'),
  125.           message: 'Add TypeScript?',
  126.           initial: false,
  127.           active: 'Yes',
  128.           inactive: 'No'
  129.         },
  130.         //jsx
  131.         {
  132.           name: 'needsJsx',
  133.           type: () => (isFeatureFlagsUsed ? null : 'toggle'),
  134.           message: 'Add JSX Support?',
  135.           initial: false,
  136.           active: 'Yes',
  137.           inactive: 'No'
  138.         },
  139.         // router
  140.         {
  141.           name: 'needsRouter',
  142.           type: () => (isFeatureFlagsUsed ? null : 'toggle'),
  143.           message: 'Add Vue Router for Single Page Application development?',
  144.           initial: false,
  145.           active: 'Yes',
  146.           inactive: 'No'
  147.         },
  148.         // pinia 状态管理库
  149.         {
  150.           name: 'needsPinia',
  151.           type: () => (isFeatureFlagsUsed ? null : 'toggle'),
  152.           message: 'Add Pinia for state management?',
  153.           initial: false,
  154.           active: 'Yes',
  155.           inactive: 'No'
  156.         },
  157.         // 测试
  158.         {
  159.           name: 'needsTests',
  160.           type: () => (isFeatureFlagsUsed ? null : 'toggle'),
  161.           message: 'Add Cypress for testing?',
  162.           initial: false,
  163.           active: 'Yes',
  164.           inactive: 'No'
  165.         }
  166.       ],
  167.       // 第二个参数,如果取消操作,可以返回一些信息
  168.       {
  169.         onCancel: () => {
  170.           throw new Error(red('✖') + ' Operation cancelled')
  171.         }
  172.       }
  173.     )
  174.   } catch (cancelled) {
  175.     console.log(cancelled.message)
  176.     //结束进程
  177.     process.exit(1)
  178.   }
  180.   // `initial` won't take effect if the prompt type is null
  181.   // so we still have to assign the default values here
  182.   // 通过参数设置默认值,有可能不存在
  183.   const {
  184.     packageName = toValidPackageName(defaultProjectName),
  185.     shouldOverwrite,
  186.     needsJsx = argv.jsx,
  187.     needsTypeScript = argv.typescript,
  188.     needsRouter = argv.router,
  189.     needsPinia = argv.pinia,
  190.     needsTests = argv.tests
  191.   } = result
  192.   // 获取目标目录
  193.   const root = path.join(cwd, targetDir)
  195.   // 强制写入
  196.   if (shouldOverwrite) {
  197.     emptyDir(root)
  198.     // 不存在创建
  199.   } else if (!fs.existsSync(root)) {
  200.     fs.mkdirSync(root)
  201.   }
  203.   console.log(`\nScaffolding project in ${root}...`)
  204.     // 包名称和版本
  205.   const pkg = { name: packageName, version: '0.0.0' }
  206.   fs.writeFileSync(path.resolve(root, 'package.json'), JSON.stringify(pkg, null, 2))
  208.   // todo:
  209.   // work around the esbuild issue that `import.meta.url` cannot be correctly transpiled
  210.   // when bundling for node and the format is cjs
  211.   // const templateRoot = new URL('./template', import.meta.url).pathname
  212.   // 临时文件夹
  213.   const templateRoot = path.resolve(__dirname, 'template')
  214.   // 渲染模板
  215.   const render = function render(templateName) {
  216.     const templateDir = path.resolve(templateRoot, templateName)
  217.     renderTemplate(templateDir, root)
  218.   }
  219.     // 基于配置渲染相关的模板
  220.   // Render base template
  221.   render('base')
  223.   // Add configs.
  224.   if (needsJsx) {
  225.     render('config/jsx')
  226.   }
  227.   if (needsRouter) {
  228.     render('config/router')
  229.   }
  230.   if (needsPinia) {
  231.     render('config/pinia')
  232.   }
  233.   if (needsTests) {
  234.     render('config/cypress')
  235.   }
  236.   if (needsTypeScript) {
  237.     render('config/typescript')
  238.   }
  240.   // Render code template.
  241.   // prettier-ignore
  242.   const codeTemplate =
  243.     (needsTypeScript ? 'typescript-' : '') +
  244.     (needsRouter ? 'router' : 'default')
  245.   render(`code/${codeTemplate}`)
  247.   // Render entry file (main.js/ts).
  248.   if (needsPinia && needsRouter) {
  249.     render('entry/router-and-pinia')
  250.   } else if (needsPinia) {
  251.     render('entry/pinia')
  252.   } else if (needsRouter) {
  253.     render('entry/router')
  254.   } else {
  255.     render('entry/default')
  256.   }
  258.   // Cleanup.
  259.     // 如果使用ts
  260.   if (needsTypeScript) {
  261.     // rename all `.js` files to `.ts`
  262.     // rename jsconfig.json to tsconfig.json
  263.     // 替换文件名
  264.     preOrderDirectoryTraverse(
  265.       root,
  266.       () => {},
  267.       (filepath) => {
  268.         if (filepath.endsWith('.js')) {
  269.           fs.renameSync(filepath, filepath.replace(/\.js$/, '.ts'))
  270.         } else if (path.basename(filepath) === 'jsconfig.json') {
  271.           fs.renameSync(filepath, filepath.replace(/jsconfig\.json$/, 'tsconfig.json'))
  272.         }
  273.       }
  274.     )
  276.     // Rename entry in `index.html`
  277.     const indexHtmlPath = path.resolve(root, 'index.html')
  278.     const indexHtmlContent = fs.readFileSync(indexHtmlPath, 'utf8')
  279.     fs.writeFileSync(indexHtmlPath, indexHtmlContent.replace('src/main.js', 'src/main.ts'))
  280.   }
  281.     // 不需要测试,直接删除
  282.   if (!needsTests) {
  283.     // All templates assumes the need of tests.
  284.     // If the user doesn't need it:
  285.     // rm -rf cypress **/__tests__/
  286.     preOrderDirectoryTraverse(
  287.       root,
  288.       (dirpath) => {
  289.         const dirname = path.basename(dirpath)
  291.         if (dirname === 'cypress' || dirname === '__tests__') {
  292.           emptyDir(dirpath)
  293.           fs.rmdirSync(dirpath)
  294.         }
  295.       },
  296.       () => {}
  297.     )
  298.   }
  300.   // Instructions:
  301.   // Supported package managers: pnpm > yarn > npm
  302.   // Note: until <https://github.com/pnpm/pnpm/issues/3505> is resolved,
  303.   // it is not possible to tell if the command is called by `pnpm init`.
  304.   // 包管理工具 pnpm  > yarn > npm
  305.   const packageManager = /pnpm/.test(process.env.npm_execpath)
  306.     ? 'pnpm'
  307.     : /yarn/.test(process.env.npm_execpath)
  308.     ? 'yarn'
  309.     : 'npm'
  311.   // README generation
  312.   fs.writeFileSync(
  313.     path.resolve(root, 'README.md'),
  314.     // 生成readme
  315.     generateReadme({
  316.       projectName: result.projectName || defaultProjectName,
  317.       packageManager,
  318.       needsTypeScript,
  319.       needsTests
  320.     })
  321.   )
  323.   console.log(`\nDone. Now run:\n`)
  324.   if (root !== cwd) {
  325.     console.log(`  ${bold(green(`cd ${path.relative(cwd, root)}`))}`)
  326.   }
  327.   console.log(`  ${bold(green(getCommand(packageManager, 'install')))}`)
  328.   console.log(`  ${bold(green(getCommand(packageManager, 'dev')))}`)
  329.   console.log()
  330. }
  331. // 初始化运行init,捕获异常,打印error
  332. init().catch((e) => {
  333.   console.error(e)
  334. })

3. 总结

  1. 整个index.js代码非常简练,熟悉了prompt的一些用法,ru type=null,不显示,validate校验输入
  2. 为了使npx下载速度快,使用的包非常少

  3. render渲染模板,模板都是写在香港文件夹下的,需要渲染生成的模块直接拷贝,非常方便

    4. 参考文档

  4. https://juejin.cn/post/7018344866811740173

  5. https://github.com/vuejs/create-vue