小白需了解的npm知识点

小白需了解的npm知识点

随想

好久没写文章,感觉不写点文章我的账号要吃灰了,这怎么能行呢,所以还是想写一些之前想了解的内容以及做一些知识的巩固吧~

npm

npm 是 "Node Package Manager" 的缩写,它是一个为 JavaScript 语言编写的软件包管理器。npm 是 Node.js 的默认包管理工具(这也就是为什么安装 Node.js 的时候,npm 通常会一起被安装)

具体来说,npm 提供了以下功能:

  1. 包管理:您可以使用 npm 安装、更新、卸载和管理项目中的依赖包。
  2. 依赖管理:npm 允许您指定项目所依赖的其他包的版本,确保项目的一致性和稳定性。
  3. 脚本运行 :在 package.json 文件中,您可以定义脚本,使用 npm 来执行常见的任务,如启动应用、运行测试等。
  4. 发布和共享:如果您创建了自己的 Node.js 包,您可以使用 npm 将它发布到 npm 注册表(registry),让全世界的开发者可以使用。
  5. 版本控制:npm 支持语义化版本控制(Semantic Versioning),这有助于管理包的版本,以及解决可能出现的依赖冲突。
  6. npm 注册表:npm 拥有一个庞大的注册表,其中包含了超过百万个开源包,供开发者免费使用。

npm实现思路

  • 1、买个服务器作为代码仓库(registry),在里面放所有需要被共享的代码;

  • 2、通知开源库的作者使用 npm publish 把代码提交到 registry 上;

  • 3、想使用这些代码,就把第三方依赖(package)的name写到 package.json 里,当运行 npm install ,npm 就会帮忙下载代码;

  • 4、下载完的代码出现在 node_modules 目录里,可以在项目中随意使用。

看到npm install的时候,就会想起我们刚学前端时,也会对其产生困惑,以至于刚上手的时候,只会依葫芦画瓢,那么 npm install 发生了什么?以及我们经常用的 npm run xxx 的时候发生了什么呢?请接着往下看~

npm install 发生了什么

  • 如果执行 npm install 时没有指定具体的包名,npm 将根据当前项目根目录下的 package.json 文件列出的依赖来安装所需的包。
  • 如果执行 npm install <package>,则 npm 会安装指定的包以及该包的依赖。
  • npm 会联系 npm 注册表(registry)来获取包的信息,包括包的版本、依赖关系、下载 URL 等。
  • 一旦获取了包的信息,npm 会下载包的 tarball 文件(一个包含了包内容的压缩包)
  • 下载完成后,npm 会将 tarball 解压到本地项目的 node_modules/ 目录下。
  • 如果是全局安装(使用 npm install -g <package> 命令),则包会被解压到全局的 node_modules/ 目录中。
  • 这样就下载到我们本地了~

如果安装了新的包,npm 会更新 package.json 中的 dependenciesdevDependencies 列表。 package-lock.json 文件也会被更新或创建,以确保将来在其他环境中安装时能够获取到相同版本的依赖。

如果刚开始学,肯定也会对其中一些概念不清楚,什么是package-lock.json文件?什么是package.json?...

全局安装和局部安装

全局安装

npm install -g <package>:

  • 全局安装是将npm包安装在你的node安装目录下的node_modules文件夹中

  • npm包在全局安装之后,这个包的命令就会被注册到全局,你就可以直接在命令行中执行这个命令了

局部安装

npm install <package>:

  • 在特定项目中执行npm install xxx,那么这个包会被安装在这个项目的node_moduels目录下。

更详情的内容可以看 => juejin.cn/post/684490...

package.json和package-lock.json

package.json

用来描述项目及项目所依赖的模块信息(相当于项目的大管家)。这个文件是手动创建或通过 npm init 命令生成的。

这个文件中的一些关键字段包括:

  • name:项目/模块名称。
  • author:项目开发者。
  • private:是否私有,设置为 true 时,npm 拒绝发布。
  • contributors:项目贡献者 。
  • version:项目当前版本。
  • scripts:可以通过 npm 运行的脚本命令。
  • dependencies:项目运行所必须的依赖列表。
  • devDependencies:仅在开发过程中需要的依赖列表。
  • peerDependencies:指定了宿主环境所需的依赖。

package-lock.json

是当你安装依赖时,npm 自动生成的一个文件,它的作用是锁定安装时各个包的具体版本号和来源,确保其他人在安装相同依赖时能够得到一模一样的版本,从而避免由于依赖版本差异带来的问题。

主要包含的信息有:

  • "name""version" 字段表示项目的名称和版本。
  • "lockfileVersion" 是由 npm 自动生成的,表示 package-lock.json 文件的格式版本。
  • "requires" 如果为 true,表示每个依赖将会有一个对应的 requires 列表。
  • "dependencies" 是一个对象,列出了项目所依赖的包以及它们的子依赖 它的产生就是来对整个依赖树进行版本固定的(锁死)。

小结

当我们在一个项目中npm install时候,会自动生成一个package-lock.json文件,和package.json在同一级目录下。package-lock.json记录了项目的一些信息和所依赖的模块。这样在每次安装都会出现相同的结果. 不管你在什么机器上面或什么时候安装。

当我们下次再npm install时候,npm 发现如果项目中有 package-lock.json 文件,会根据 package-lock.json 里的内容来处理和安装依赖而不再根据 package.json

npm run xxx 的时候发生了什么

  1. npm 首先会查找项目根目录下的 package.json 文件,并尝试读取 scripts 对象里的 xxx 属性。

    例如启动vue项目 npm run serve的时候,实际上就是执行了vue-cli-service serve 这条命令。

    package.json文件

    json 复制代码
    {
      "name": "h5",
      "version": "1.0.7",
      "private": true,
      "scripts": {
        "serve": "vue-cli-service serve"
       },
    }
  2. npm运行script脚本时会自动给脚本路径都加上了node_moudles/.bin前缀,这意味着:你在试图运行script中某个脚本时,实际上是运行node_moudles/.bin下的对应软链接文件(替身)。

    npm 会到 ./node_modules/.bin 中找到 vue-cli-service 文件作为 脚本来执行,则相当于执行了 ./node_modules/.bin/vue-cli-service serve(最后的 serve 作为参数传入)

那么为什么最后执行的仅仅是软链接文件(替身)呢?真正的地方存放在哪里呢?

我们可以直接在新建的vue项目里面搜索vue-cli-service

package-lock.json 中可知,当我们npm i 整个新建的vue项目的时候,npm 将 bin/vue-cli-service.js 作为 bin 声明了。

所以在 npm install 时,npm 读到该配置后,就将该文件软链接到 ./node_modules/.bin 目录下,而 npm 还会自动把node_modules/.bin加入$PATH,这样就可以直接作为命令运行依赖程序和开发依赖程序,不用全局安装了。

这一块有更详情文章,可以看看大佬写的 =〉 juejin.cn/post/707892...

结尾

感谢阅读~

🌹🌹🌹

觉得帮助到了屏幕前面的你可以点个赞➕收藏鼓励一下hh~

相关推荐
腾讯TNTWeb前端团队3 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰6 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪6 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪7 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy7 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom8 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom8 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom8 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom8 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom8 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试