前端项目敲入 npm run xxx 的时候发生了什么?

编程入门 行业动态 更新时间:2024-10-22 18:37:23

前端项目敲入 npm run xxx 的时候<a href=https://www.elefans.com/category/jswz/34/1755829.html style=发生了什么?"/>

前端项目敲入 npm run xxx 的时候发生了什么?

package.json

npm 离不开 package.json ,要了解 npm 的运行机制,我们先看看 package.json 文件是做什么的。首先 package.json 文件是每个前端项目存在于根目录的文件,包含了项目的一些基本信息(例如项目名称,版本号,描述,一些脚本,依赖等等),大致的结构如下:

{"name": "whyknown","version": "1.0.0","description": "whyknown,前端开发者必备网站","main": "src/index.js","scripts": {"start": "node index.js","lint": "eslint **/*.js"},"dependencies": {"express": "^4.16.4","compression": "~1.7.4"},"devDependencies": {"eslint": "^5.16.0","nodemon": "^1.18.11"},"repository": {"type": "git","url": ".git"},"author": "whyknown","contributors": [{"name": "whyknown","email": "example@example","url": ""}],"keywords": ["server", "osiolabs", "express", "compression"]
}

我们这里重点关注 script 的配置,该配置罗列了一些可以运行的脚本,当我们在根目录执行 npm run 或者 yarn run 的时候,就会去调用这里的命令。我们拿上面的 start 命令来讲解。

当我们执行 npm run start 的时候,就会去 package.json 文件的 script 查找相关的命令,匹配到的是 start: node index.js 这个命令。

"scripts": {"start": "node index.js","dev": "nodemon","lint": "eslint **/*.js"
}

这时候就会执行 node index.js 这个命令。(由于系统已经安装过 node,所以这个命令就可以正常执行)。那么 npm run start 跟 node index.js 有什么区别呢?为什么不直接 node index.js呢?

相关信息

npm 脚本的唯一要求就是可以在 Shell 执行

全局命令和局部命令

由于 node 我们已经安装在电脑里面了,所以上面两个命令其实没啥区别,你非要用 node index.js 也是可以的。但是有时候有一些命令没有全局安装的时候,例如第二条命令的 eslint **/*.js 。你直接执行就会报错

$ eslint **/*.js
bash: eslint: command not found

主要的原因是我们没有全局安装 eslint ,所以会报错,那为什么 npm run lint 就可以顺利执行呢。为了解答这个问题,我们来看看 node_modules 文件夹的.bin 目录

.bin 目录

.bin 目录,这个目录下的文件,都是一些软链接,打开文件可以看到文件顶部写着 #!/bin/sh ,表示这是一个脚本。所以 npm run 执行的时候,当全局没有安装相关命令的时候,就会到这里去查找。

由此我们可以知道,当使用 npm run test 执行 eslint **/*.js 时,虽然没有全局安装 eslint 的全局命令,但是 npm 会到 ./node_modules/.bin 中找到 eslint 文件作为脚本来执行,则相当于执行了 ./node_modules/.bin/eslint **/*.js

总结

  1. 运行 npm run xxx 的时候,npm 会先在当前目录的 node_modules/.bin 查找要执行的程序,如果找到则运行;
  2. 没有找到则从全局的 node_modules/.bin 中查找,也就是npm i -g xxx 就是安装到到全局目录;
  3. 如果全局目录还是没找到相关命令,那么就从系统的环境变量中查找同名的可执行程序。

更多推荐

前端项目敲入 npm run xxx 的时候发生了什么?

本文发布于:2023-12-03 23:40:04,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1659049.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:发生了什么   敲入   项目   npm   xxx

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!