硬刚VueCli3源码系列一 - 从零搭建项目架构，项目准备、创建项目软链接、初创create命令

写在开头

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

再执行 juejin-vue-cli create first-project 命令，如果新修改的文件内容没有生效，可以重新执行 npm link 命令：

从图中可以看到，当我们执行 create 命令时，如果没有输入项目名，会自动有提示。

因为我们使用 commander 提供的尖括号（<>）语法规定项目名为必填，如果你想它变成是一个可选项，你可以使用它的括号（[]）语法，它则会变成一个可选参数。

当我们有输入项目名，我们能直接通过 action((name, cmd) => {}) 第一个参数获取到，而它第二个参数是一个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 命令：

---

至此，本篇文章就写完啦，撒花撒花。

希望本文对你有所帮助，如有任何疑问，期待你的留言哦。
老样子，点赞+评论=你会了，收藏=你精通了。