为什么全局安装@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 <name> #删除软链接 rm <name>
脚手架的开发流程
- 创建npm项目
- 创建脚手架入口文件,最上方添加:
#!/usr/bin/env node
- 配置package.json 添加bin属性
- 编写脚手架代码
- 将脚手架发布到npm
脚手架开发难点
- 分包: 将复杂系统拆分成若干个模块
- 命令注册:
vue create
vue add
vue invoke
- 参数解析
vue command [options] <params>
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 也可。