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

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

写在开头

Hello ~ 各位小伙伴们大家好呀^-^,小编又回来了,带着新的源码系列专题走来啦。咱在写上一个源码系列专题(Axios源码系列)时说过,小编下一个源码系列已经备好 - VueCli3,这不,它就来了嘛。(✪ω✪)

这个专题可能比较适合一些学 Vue 的小伙伴观看,或者说是学过 Vue 的小伙伴可能会更感兴趣一些吧,毕竟是 Vue 的衍生物。当然,没学过 Vue 的小伙伴也可以看啦,因为里面更多是一些 Node 方面的知识,相信这个专栏一定能让你学到很多东西的。

相信使用过 Vue 的人一定见过下图的场景:

image.png

image.png

image.png

没错,通过交互式的选择,来帮助我们快速创建出项目的基础结构,从而提高我们的工作效率,这就是 vue-cli 脚手架带来的便利。那么,你就不好奇,这么一个东西内部逻辑是如何的实现,是怎么做到的呢?(如果你不好奇,当我没说(★ᴗ★))

本次,小编就带你进入 vue-cli 的内部世界,全面了解它的"前世今生"。咱先贴上一张大致流程图,小伙伴可以先自行观摩观摩:

VueCli.jpg

流程图如果看得比较蒙,没关系,等整个专题学完后,再回过头来看,相信你能眼前一亮。

预备知识

commander 这个包是 NodeJS 命令行界面完整的解决方案。

这是它的简介,什么意思呢?其实简单来说它能帮助你快速解析出每个命令行的内容,让你更便捷的获取到命令行中的参数信息

下面我们来看看例子,更直观体会一下,假如我们需要查一个项目的版本号,来看看 Nodecommander 分别需要怎么做。

NodeJS

console.log(process.argv[2] === '-v' ? '1.0.0' : '');
复制代码

image.png

commander

const program = require('commander');

program
  .version('1.0.0', '-v, --version')
  .parse(process.argv);
复制代码

image.png

应该看出来了吧?就是对 Node 中的 process 模块进行一些封装,让人使用起来更加方便。

当然,它还有很多其他语法的内容,这里我们就先不多说了,等用到的时候再细说,先有了解就行。如果想看更多详情,也可以直接看看官方文档

项目准备

那废话不多说,我们赶紧来开始本章的内容。

首先,老样子,在你的电脑里寻找一个风水宝地,创建一个文件夹,例如 juejin-vue-cli 文件夹。然后创建这样子 juejin-vue-cli/packages/@vue/cli 的文件夹结构,再通过 npm init -y 命令,在 cli 文件夹下初始化 package.json 文件。

image.png

为什么要创建怎么多层的结构呢?呃......纯粹就是保持和源码结构一样而已,以免后期你去看源码时变了味。(✪ω✪)

然后继续在 cli 文件夹下,创建 bin/vue.js 文件:

#!/usr/bin/env node
console.log('橙某人');
复制代码

image.png

修改 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 命令。

image.png

(如果你执行 npm link 命令报错,可以先执行 npm unlink 命令后,再执行 npm link 命令,如果还没解决,欢迎底下给我留言询问唷。)

然后再次执行 juejin-vue-cli 命令:

image.png

从上图可以看到 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 命令:

image.png

从图中可以看到,当我们执行 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 命令:

image.png




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

image.png

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

分类:
前端
收藏成功!
已添加到「」, 点击更改