这是我参与更文挑战的第 7 天，活动详情查看： 更文挑战

2021-06-07 总结 TANGJIE 其他 脚手架基础 脚手架原理

前端脚手架开发，初识探本质

1. 基本原理

1.1 手脚架是如何创建自己的主命令的

例如vue-cli，其主命令是vue，那么这个命令是怎么创建的呢？

找到vue这个命令的文件地址：which vue

这样我们就能够轻易的找到这样的文件夹如图：

在其中我们可以发现@vue/cli 有一个package.json里面有一条很清晰的配置语句:

...
"bin": {
    "vue": "bin/vue.js"
 }
...
复制代码

这也就是为什么下载了一个Vue-cli手脚架，用来创建其项目的时候，使用是vue这个命令的原因;

1.2 安装执行手脚架发生了什么？

上面说的只是一种配置，具体我们能用到vue create xxx 那就需要项目安装的时候去配置一些东西。

• 很浅显的第一步，将包下载到全局的node_moudles这个文件夹中
• 解析package.json中bin的这个语句，然后再/c/Users/Administrator/AppData/Roaming/npm目录下创建一个软链接（shell脚本），这个链接就指向了bin配置的路径
• 执行vue命令时 首先在which vue找到这个路径下的vue软链接，然后通过这个软链接去执行vue.js 但是这里有一个很大的问题是，vue.js是不能去直接执行的，执行解释js文件需要一个专门的解释器，也就node，那么她如何用node发起执行的呢？ 打开@vue/cli/bin/vue.js，看到代码第一条#!/usr/bin/env node,对没错就是这条语句，使得终端知道用node去解释执行vue.js文件，那么这个语句的意思是什么呢？ 意思是通过环境变量找到node解释器，如果是其他语言就改一下解释器就行了

2. 小试破菜刀

看了上面的原理，我们来实践一下，毕竟实践出真知

1. 找个地方创建一个cli文件夹，写入test.js,我的目录地址是E:/myproject/Demo/cli/test.js

// test.js

#!/usr/bin/env node

console.log('test');
复制代码

2. 使用echo $PATH去找到node的环境变量 C:\Users\Administrator\AppData\Roaming\npm,其实用which vue也行,前提是你电脑全局安装了vue-cli;
3. 进入到这个文件夹下，创建软链接ln -s E:/myproject/Demo/cli/test.js examplecli;
4. 随便在一个地方，打开命令行工具 输入 examplecli命令，完美打印出 test 这个字样

3. 手脚架的开发流程

3.1 基本开发流程

1. 创建npm项目
2. 创建手脚架入口文件，并添加#!/usr/bin/env node语句
3. 配置packag.json 添加bin属性，映射项目入口文件位置
4. 编写手脚架
5. 将手脚架发布到npm

3.2 开发难点

1. 分包，将复杂的系统分成若干个模块
2. 命令注册

// 例如vue-cli的这些命令是怎么注册的
vue create
vue add
vue invoke
复制代码

3. 参数解析，主命令 command [options] <params>,options的全称：–version；options的简写-r ；带params的options等；
4. 帮助文档
5. 命令行交互
6. 日志打印
7. 命令行变色
8. 网络通信
9. 文件处理

这些问题可以先自己思考，欢迎关注下一期