前端脚手架实现原理

前端 专栏收录该内容
1 篇文章 0 订阅

相信每一个前端开发都使用过脚手架特别是使用一些主流框架的时候都会使用框架提供的脚手架来初始化项目
下面就来说说脚手架的实现原理

使用 yarn 或者 npm 全局安装脚手架后发生了什么

在使用yarn或者npm进行全局安装组件的时候,除了会将组件下载下来安装到全局的node_modules下外,有一个package.json中的小小配置帮我们把我们写在配置文件中的命令注册为环境中的命令,那就是 bin

npm官方文档 package.json - bin

我们可以在package.json中配置:

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

这样就可以把cli-base注册为系统命令来运行脚本了。

执行命令时发生了什么,为什么可以直接运行js文件

那么问题又来了,我们写的是javascript代码为什么执行这个命令时,就能直接执行javascript代码呢?

我们通过which命令看看这个命令的可执行文件在哪里:

➜  ~ which cli-base
/Users/ashin/.nvm/versions/node/v10.20.0/bin/cli-base

which 命令是Unix-like系统下提供的命令可以找到命令的可执行文件位置

➜  ~ ls -l /Users/ashin/.nvm/versions/node/v10.20.0/bin/cli-base
lrwxr-xr-x  1 ashin  staff  41  6 11 16:12 /Users/ashin/.nvm/versions/node/v10.20.0/bin/cli-base -> ../lib/node_modules/cli-base/bin/index.js
➜  ~

我们在用ls -l 看下这个命令具体信息,原来它是一个链接,链接到了/Users/ashin/.nvm/versions/node/v10.20.0/lib/node_modules/cli-base/bin/index.js 这个文件

文件内容:

#!/usr/bin/env node

console.log('hello')

#!/usr/bin/env node 的作用是帮我们在环境变量中找到node命令并用node命令去执行这个文件。

那么真相大白了,当我们运行在package.json中注册的命令的时候,实际就是执行了我们在package.json中bin下配置的文件,并且用node执行了它。

完整代码点这里

link本地调试

如果想在本地调试命令我们可以在cli项目根目录下使用 npm link,这样就可以在本地调试啦~

  • 0
    点赞
  • 1
    评论
  • 0
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

评论 1 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:编程工作室 设计师:CSDN官方博客 返回首页

打赏作者

AXING阿幸

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

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

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

打赏作者

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

抵扣说明:

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

余额充值