npm run xx的时候发生了什么

1、比如我有如下配置
在这里插入图片描述
2、当执行 npm start 时,相当于执行 react-scripts start
但当我们直接在命令行执行react-scripts start时,报错 zsh: command not found: react-scripts
react-scripts是使用 create-react-app 搭建 React 项目时默认配置的, react-scripts 并没有全局安装,所以直接执行时会报错
3、这时我们可以看一下,使用 create-react-app 搭建的项目(使用 vue-cli 搭建的项目也一样),在 npm install 后,其 node_modules 目录下面的样子:
在这里插入图片描述

4、可以看到有一个 .bin 目录,这个目录不是任何一个 npm 包。目录下的文件,右面都有一个小箭头(VS Code 上这样显示),表示这是一个软链接,打开文件可以看到文件顶部写着 #!/user/bin/env node ,表示这是一个通过使用 Node 执行的脚本。
在这里插入图片描述
5、(这时候就是npm的作用了) 当使用 npm start执行 react-scripts start 时,虽然没有安装 react-scripts 的全局命令,但是 npm 会到 ./node_modules/.bin 中找到 react-scripts.js 文件作为 Node 脚本来执行,则相当于执行了 ./node_modules/.bin/react-scripts start(最后的 start 作为参数传入)
6、react-scripts 是一个软链接,那么它的指向是哪里,又是怎么来的呢?
我们可以在 node_modules 目录下,直接找到 react-scripts 包,查看其目录结构和 package.json 如下:
在这里插入图片描述
7、从 package.json 中可知,这个包将 ./bin/react-scripts.js 作为 bin 声明了。在 npm install 时,npm 读到该配置后,就将该文件软链接到./node_modules/.bin 目录下,而 npm 还会自动把node_modules/.bin加入$PATH,这样就可以直接作为命令运行依赖程序和开发依赖程序,不用全局安装了。
8、假如我们在安装包时,使用 npm install -g xxx 来安装,那么会将其中的
bin 对应的文件加入到全局,比如 create-react-app 和 vue-cli ,在全局安装后,就可以直接使用如 projectName 这样的命令来创建项目了。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值