
橙某人
2022/09/14阅读:51主题:前端之巅同款
硬刚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
命令:

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

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

橙某人
打杂工 | 广州郊区建筑工地