Week02 -脚手架的实现原理

为什么全局安装@vue/cli后会添加vue的命令？

npm install -g @vue/cli

查看vue实际文件路径

> which vue
/usr/local/bin/vue

bin目录下存放的是可执行文件

> cd /usr/local/bin
> ll
lrwxr-xr-x  1 song  admin    39B 12 28 21:48 vue -> ../lib/node_modules/@vue/cli/bin/vue.js

可以看到vue实际是一个软链接，指向：../lib/node_modules/@vue/cli/bin/vue.js

绑定管理在哪里指定的呢？

进入到@vue/cli安装目录

> cd /usr/local/lib/node_modules/@vue/cli
> ll
-rw-r--r--    1 song  admin   2.5K 12 28 21:48 package.json

在package.json中有一个bin的配置

 "bin": {
    "vue": "bin/vue.js"
  },

这里配置了安装完之后的软链接名称，以及指向的实际文件

全局安装@vue/cli时发生了什么？

npm install -g @vue/cli

• 第一步：会把@vue/cli下载到node node_modules中
• 第二步：下载成功后会解析package.json 中的 bin 配置，有这个配置就会创建一个软链接

vue执行一个js文件，为什么可以执行它？

• 执行vue命令时，系统会执行which vue在环境变量中找vue的注册并执行文件

# 这两条命令执行是等价的
> vue
>/usr/local/bin/vue 

• 执行的真实文件是vue对应的软链接：../lib/node_modules/@vue/cli/bin/vue.js
  直接执行一个xx.js执行不了的，vue.js又是怎么执行的呢？
  js文件需要一个解释器(node)来执行
  vue.js源码第一行

#!/usr/bin/env node

自己创建一个js文件,test.js中第一行加入此代码，通过 ./test.js也能直接执行。
为什么能直接执行？
这句话的意思是，告诉系统在环境变量中去找node命令，来执行此文件

> /usr/bin/env node # 会将node命令执行起来，与直接执行node是一样的效果

所以./test.js等于 /usr/bin/env node test.js 等于 node test.js
chmod 777 test.js 设置文件为可执行文件

自定义一条命令

思路：在环境变量中创建一个软链接，执行 test.js即可 (软链接可以嵌套)
在 /usr/local/bin下执行

>  ln -s <路径>/test/index.js  #删除软链接 rm 

脚手架命令执行流程

脚手架的开发流程

• 创建npm项目
• 创建脚手架入口文件，最上方添加：

#!/usr/bin/env node

• 配置package.json 添加bin属性
• 编写脚手架代码
• 将脚手架发布到npm

脚手架开发难点

• 分包： 将复杂系统拆分成若干个模块
• 命令注册：

vue create
vue add 
vue invoke

• 参数解析

vue command [options] 

options全称：--version、--help
options简写： -V、-h

• 帮助文档
• 命令行交互
• 日志打印
• 命令行文字变色
• 网络通信：HTTP/WebSocket
• 文件处理
  ....

理解npm link

• npm link your-lib：将当前项目中 node_modules 下指定的库文件链接到 node全局node_modules下的库文件
• npm link: 将当前项目链接到node全局node_modules中作为一个库文件，并解析bin配置创建可执行文件

理解npm unlink

• npm unlink：将当前项目从node全局node_modules中移除
• npm unlink your-li：将当前项目中的库文件依赖移除

创建一个脚手架

> mkdir cli-test # 创建一个文件夹
> npm init -y # 初始化

cli-test 目录:
-- package.json
-- bin

• |-- inde.js

index.js 文件:

#!/usr/bin/env node
console.log('Hello cli')

package.json文件：

{
  ...
  "main": "index.js",
  "bin":  {
        "cli-test": "bin/index.js"
    }
}

将脚手架发布到npm

> npm login # 登录npm
> npm publish # 发布

在cli-test目录下，进行全局安装 npm install -g cli-test 就会建立一个软链接，方便进行本地调试，
通过npm link 也可。