小白需了解的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~

相关推荐
2401_857600958 分钟前
SSM 与 Vue 共筑电脑测评系统:精准洞察电脑世界
前端·javascript·vue.js
2401_857600958 分钟前
数字时代的医疗挂号变革:SSM+Vue 系统设计与实现之道
前端·javascript·vue.js
GDAL9 分钟前
vue入门教程:组件透传 Attributes
前端·javascript·vue.js
2402_8575834919 分钟前
基于 SSM 框架的 Vue 电脑测评系统:照亮电脑品质之路
前端·javascript·vue.js
web150850966411 小时前
在uniapp Vue3版本中如何解决webH5网页浏览器跨域的问题
前端·uni-app
Yvemil71 小时前
《开启微服务之旅:Spring Boot Web开发举例》(一)
前端·spring boot·微服务
天涯学馆1 小时前
解锁WebAssembly与JavaScript交互的无限可能
前端·webassembly
少年姜太公2 小时前
从零开始详解js中的this(下)
前端·javascript·程序员
哑巴语天雨2 小时前
React+Vite项目框架
前端·react.js·前端框架
初遇你时动了情2 小时前
react 项目打包二级目 使用BrowserRouter 解决页面刷新404 找不到路由
前端·javascript·react.js