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 <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 也可。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,271评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,275评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,151评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,550评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,553评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,559评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,924评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,580评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,826评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,363评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,940评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2 342

推荐阅读更多精彩内容