前端架构之脚手架原理分析及开发流程(二)

上一节说到 脚手架的本质是操作系统的终端 因为当我们执行的时候 最终执行的是vue.js 然后由node进行解析并当成可执行程序 所以脚手架本质是客户端因为node的本质就是客户端

那脚手架执行的过程又是如何呢 一张图来剖析

在来看下脚手架的开发流程 假设以vscode-text 为例

1.建立vcsode-text文件夹

2.初始化

npm init -y

3.在package.json同级下建立 bin/index.js

4.在index.js头部加上

#!/usr/bin/env node

然后在里面随便写点内容

5.在package.json里面新增

"bin": {
    "vscode-text": "bin/index.js"
  },

6. 登录npm 然后输入账号密码

npm login

7.发布

npm publish

8. 下载依赖

npm i -g vscode-text

9. 运行

vscode-text

接下来可以查看vscode-text安装目录

which vscode-text

那当我们要修改vscode-text 的时候 难道每次都要发布 安装 然后调试吗 

不是这样的 当然可以进行本地调试 

进入当前文件下 vscode-text 然后 通过npm link 建立软连接 

在node里面安装vscode-text 连接node_modules下面的vscode-text 而node_modules下的vscode-text 连接到我们桌面的vscode-text 

这里只是一个简单的脚手架 如果存在多个分包的情况下 相互是怎么交互呢 思考一下 后续分析 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

沫熙瑾年

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值