「这是我参与2022首次更文挑战的第13天，活动详情查看：2022首次更文挑战」。
写在开头
Hello ~ 各位小伙伴们大家好呀^-^，小编又回来了，带着新的源码系列专题走来啦。咱在写上一个源码系列专题（Axios源码系列）时说过，小编下一个源码系列已经备好 - VueCli3，这不，它就来了嘛。(✪ω✪)
这个专题可能比较适合一些学 Vue 的小伙伴观看，或者说是学过 Vue 的小伙伴可能会更感兴趣一些吧，毕竟是 Vue 的衍生物。当然，没学过 Vue 的小伙伴也可以看啦，因为里面更多是一些 Node 方面的知识，相信这个专栏一定能让你学到很多东西的。
相信使用过 Vue 的人一定见过下图的场景：
没错，通过交互式的选择，来帮助我们快速创建出项目的基础结构，从而提高我们的工作效率，这就是 vue-cli 脚手架带来的便利。那么，你就不好奇，这么一个东西内部逻辑是如何的实现，是怎么做到的呢？（如果你不好奇，当我没说(★ᴗ★)）
本次，小编就带你进入 vue-cli 的内部世界，全面了解它的"前世今生"。咱先贴上一张大致流程图，小伙伴可以先自行观摩观摩：
流程图如果看得比较蒙，没关系，等整个专题学完后，再回过头来看，相信你能眼前一亮。
预备知识
commander 这个包是 NodeJS 命令行界面完整的解决方案。
这是它的简介，什么意思呢？其实简单来说它能帮助你快速解析出每个命令行的内容，让你更便捷的获取到命令行中的参数信息。
下面我们来看看例子，更直观体会一下，假如我们需要查一个项目的版本号，来看看 Node 和 commander 分别需要怎么做。
NodeJS：
console.log(process.argv[2] === '-v' ? '1.0.0' : '');
复制代码commander：
const program = require('commander');
program
.version('1.0.0', '-v, --version')
.parse(process.argv);
复制代码应该看出来了吧？就是对 Node 中的 process 模块进行一些封装，让人使用起来更加方便。
当然，它还有很多其他语法的内容，这里我们就先不多说了，等用到的时候再细说，先有了解就行。如果想看更多详情，也可以直接看看官方文档。
项目准备
那废话不多说，我们赶紧来开始本章的内容。
首先，老样子，在你的电脑里寻找一个风水宝地，创建一个文件夹，例如 juejin-vue-cli 文件夹。然后创建这样子 juejin-vue-cli/packages/@vue/cli 的文件夹结构，再通过 npm init -y 命令，在 cli 文件夹下初始化 package.json 文件。
为什么要创建怎么多层的结构呢？呃......纯粹就是保持和源码结构一样而已，以免后期你去看源码时变了味。(✪ω✪)
然后继续在 cli 文件夹下，创建 bin/vue.js 文件：
#!/usr/bin/env node
console.log('橙某人');
复制代码修改 package.json 文件：
{
"name": "cli",
"version": "3.12.1",
"description": "Own cli",
"main": "index.js",
"bin": {
"juejin-vue-cli": "bin/vue.js"
},
"scripts": {},
"keywords": [],
"author": "yd",
"license": "ISC"
}
复制代码创建项目软链接
做完项目的准备工作后，我们来让项目生成一个全局的 "软链接"，方便我们后期的开发和测试。
在 cli 文件夹下执行 npm link 命令。
（如果你执行 npm link 命令报错，可以先执行 npm unlink 命令后，再执行 npm link 命令，如果还没解决，欢迎底下给我留言询问唷。）
然后再次执行 juejin-vue-cli 命令：
从上图可以看到 bin/vue.js 文件已经被执行，并输出了该文件的内容。
而我们执行的 juejin-vue-cli 命令，这个命令的"名称"，它其实对应 package.json 文件中的 bin 属性：
"bin": {
"juejin-vue-cli": "bin/vue.js"
}
复制代码当然，你也可以随意改成你想叫的名称，改完记得重新创建软链接，先执行 npm unlink 命令，再执行 npm link 命令即可。
更多关于 npm link 使用内容可以看小编的另一篇文章：小知识，如何通过 npm link 创建自己的全局“软链接” ？
初创create命令
创建好项目的软链接后，接下来，我们就开始来为项目创建第一条命令，也就是我们平时最常用得 vue create packageName 命令。
我们先来安装依赖：
npm install commander@2.20.0
复制代码修改 bin/vue.js 文件：
#!/usr/bin/env node
const program = require('commander');
program
.command('create <app-name>') // <> 尖括号为必填
.description('这是一条初始化项目的命令') // 这个描述会添加到 junjin-vue-cli -h 展示的提示中
.action((name, cmd) => { // name为项目名, cmd为commander对象信息
console.log(name, cmd);
});
program.parse(process.argv);
复制代码然后我们重新执行 npm link 命令，再执行 juejin-vue-cli create first-project 命令：
从图中可以看到，当我们执行 create 命令时，如果没有输入项目名，会自动有提示。
因为我们使用 commander 提供的尖括号（<>）语法规定项目名为必填，如果你想它变成是一个可选项，你可以使用它的括号（[]）语法，它则会变成一个可选参数。
这样，我们的 create 命令就初步创建完成了，后续的其他具体逻辑处理，我们就放到下一篇文章在一起讲好了。
最后，我们把项目查询版本号的命令也顺便加上，修改 bin/vue.js 文件：
#!/usr/bin/env node
const program = require('commander');
// -v, --version 命令
program
.version(`juejin-vue-cli ${require('../package').version}`, '-v, --version')
.usage('命令错误，您可以输入 juejin-vue-cli -h 命令查看具体命令');
// create 命令
program
.command('create <app-name>')
.description('这是一条初始化项目的命令')
.action((name, cmd) => {
console.log(name, cmd);
});
program.parse(process.argv);
复制代码然后重新执行 npm link 命令，再执行 juejin-vue-cli -v 命令：
至此，本篇文章就写完啦，撒花撒花。
希望本文对你有所帮助，如有任何疑问，期待你的留言哦。
老样子，点赞+评论=你会了，收藏=你精通了。