前端包管理工具详解npm

fadeaway_shot
258 阅读7分钟

前言

今天我们来分析一下前端包管理工具，希望通过本文的学习，能够让大家和我一起搞懂一些问题。

带上疑问开始今天的学习：

  1. 我会用npm install安装包，它的原理是什么？
  2. 项目中有自带的package.json文件，但是其中的一些字段是什么意思？
  3. package-lock.json和package.json文件有什么区别？
  4. 如何发布自己的npm包？
  5. npm和yarn有什么区别？
  6. .................

代码共享方案

如果我们通过模块化封装了一个工具，我们可以让同事们通过导入的方式来使用，那如果要是想分享给世界上所有的程序员使用，有哪些方式呢？

  1. 上传到Github上，其他程序员通过Github下载我们的代码手动引入使用；

    1. 缺点是大家必须要知道你代码Github的地址，并且从Github上手动下载；
    2. 需要在自己的项目中手动的引用，并且管理相关的依赖；
    3. 不需要使用的时候，需要手动来删除相关的依赖；
    4. 当遇到版本升级或者切换时，需要重复上面的操作；

  2. 使用一个专业的工具来管理我们的代码

    1. 通过工具将代码发布到特定的位置；
    2. 其他程序员直接通过工具来安装、升级、删除我们的工具代码；

显然，通过第二种方式我们可以更好的管理自己的工具包，这个工具就是Node包管理器。

包管理工具npm

Node Package Manager，也就是Node包管理器。在前端项目中我们也在使用它来管理依赖的包。

如何下载和安装npm工具呢？

npm属于node的一个管理工具，所以我们需要先安装Node，安装Node的过程会自动安装npm工具。

npm包的官网: www.npmjs.com/

npm的配置文件

对于一个项目来说，我们如何使用npm来管理这么多包呢？

  • 事实上，我们每一个项目都会有一个配置文件，无论是前端项目还是后端项目；
  • 这个配置文件会记录着你项目的名称、版本号、项目描述等，也会记录着你项目所依赖的其他库的信息和依赖库的版本号；

这个配置文件就是package.json；

那么这个配置文件如何得到呢？

  1. 手动创建，执行命令npm init 或者 npm init -y ( 默认 ) ；
  2. 通过脚手架创建项目，脚手架会帮助我们生成package.json，并且里面有相关的配置；

常见的配置文件

  1. npm init 创建时填写的信息，npm init -y 所有信息使用默认的

1676870369713.png

1. create-react-app创建项目生成的package.json

1676872261015.png

常见的属性

  • name是项目的名称；

  • version是当前项目的版本号；

  • description是描述信息，很多时候是作为项目的基本描述；

  • author是作者相关信息（发布时用到）；

  • license是开源协议（发布时用到）；

  • private属性

    • private记录当前的项目是都是私有的；
    • 当值为true时，npm是不能发布它的，这是防止私有项目或模块发布出去的方式；

  • main属性

    • 设置程序的入口

1676872611608.png

  • scripts属性

    • scripts属性用于配置一些脚本命令，以键值对的形式存在；

    • 配置后我们可以通过npm run 命令的key来执行这个命令；

    • npm start和npm run start的区别是什么？

      • 对于常用的start、test、stop、restart可以省略掉run直接通过npm start等方式运行；

  • dependencies属性

    • dependencies属性是指定无论开发环节还是生产环节都需要依赖的包；
    • 通常是项目实际开发用到的一些库模块react、react-dom、axios等等；

  • devDependencies属性

    • 只在开发环境中需要的，生产环境不需要的包，比如webpack、babel等；
    • 这个时候我们会通过npm Install webpack -D,将它安装到devDependencies属性中；

  • peerDependencies属性

    • 这种项目依赖关系是对等依赖，也就是你依赖的一个包，它必须是以另外一个宿主包为前提的；

  • engines属性

    • engines属性用于指定Node和NPM的版本号;
    • 在安装的过程中，会先检查对应的引擎版本，如果不符合就会报错；

  • browserslist属性

    • 用于配置打包后的Javascript浏览器的兼容情况；

依赖的版本管理

我们会发现安装的依赖版本出现：^2.0.3 或 ~2.0.3，这分别是什么意思呢？

npm的包通常需要遵守semver版本规范：

semver版本的规范是主版本号.次版本号.修订号（X.Y.Z），规则如下：

  • X主版本号：当你做了不兼容的API修改
  • Y次版本号：当你做了向下兼容的功能性修改
  • Z修订号：当你做了向下兼容的问题修正

在这里解释一下 ^ 和 ~ 的区别：

  • x.y.z：表示一个明确的版本号；
  • ^x.y.z：表示x是保持不变的,y和z永远安装最新的版本;
  • ~x.y.z：表示x和y保持不变的,z永远安装最新的版本;

npm install 命令

安装npm包分两种情况：

  • 全局安装： npm install -g；
  • 项目中( 局部 ) 安装：npm install

通常使用全局安装的包都是一些工具包：yarn、webpack等；

项目安装

项目安装会在当前目录下生成一个node_modules文件夹；

局部安装分为开发时依赖和生产时依赖：

# 默认安装开发和生产依赖
npm install <package>
npm i <package>
​
# 开发依赖
npm install <package> --save-dev
npm install <package> -D
npm i <package> -D
​
# 根据package.json中的依赖包
npm install
npm install 原理

之前在项目中已经会了 npm install ,但是我并没有思考过它的内部原理呢？

  • 执行npm install 它背后帮助我们完成了什么操作？
  • 还有一个package-lock.json的文件，他的作用是什么？
  • 从npm5开始，npm支持缓存策略，缓存有什么作用？

先从下面这个图开始：

1676880302085.png

解析：

  • 没有lock文件

    • 分析依赖关系，这是因为一个包会依赖其他的包，并且多个包之间会产生相同依赖的情况；
    • 从registry仓库中下载压缩包
    • 获取到压缩包后会对压缩包进行缓存
    • 将压缩包解压到项目的node_modules文件夹中，并生成package-lock文件

  • 有lock文件

    • 检查lock中包的版本是否和package.json中是否一致

      • 不一致，那么会重新构建依赖关系，直接会走没有lock文件的流程

    • 一致的情况下，会去优先查找缓存

      • 没有找到，会从registry仓库下载，直接会走没有lock文件的流程

    • 查找到，会获取缓存中的压缩文件，并且将压缩文件解压到node_modules文件夹中

package-lock.json文件解析

1676881416622.png

  • name：项目的名称；

  • version：项目的版本；

  • lockfileVersion：lock文件的版本；

  • requires：使用require来跟踪模块的依赖关系；

  • dependencies：项目的依赖

    • 当前项目依赖axios，但是axios依赖follow-redirects;

    • axios中的属性如下：

      • version表示实际安装的axios的版本
      • resolved用来记录下载的地址，registry仓库中的位置
      • requires/dependencies记录当前模块的依赖；
      • integrity用来从缓存中获取索引，再通过索引去获取压缩包文件；

npm其他命令

介绍几个常用的：

  • 卸载某个包

    • npm uninstall

  • 强制重新build

    • npm rebuild

  • 清除缓存

    • npm cache clean

其他命令可以在官网查询，docs.npmjs.com/cli/v9/comm…

yarn工具

yarn是由Facebook、Google、Exponent 和 Tilde联合推出了一个新的JS包管理工具，是为了弥补早期npm的一些缺陷而出现的；

对比

早期npm存在很多缺陷，比如安装依赖速度很慢、版本依赖混乱等等一系列的问题；

yarn的优点：

  • 速度快，yarn并行安装，提高了性能
  • 再次安装时先从缓存中获取
  • 安装版本统一
  • 命令更简洁

yarn和npm命令对比：

npmyarn说明
npm installyarn安装依赖包
npm install [package]yarn add [package]安装某个包
npm install [package] --save-devyarn add [package] [--dev/-D]局部安装某个包
npm rebuildyarn install --force重建一个包
npm uninstall [package]yarn remove [package]卸载某个包
npm cache cleanyarn cache clean清除内存

npm发布自己的包

  • 去官网注册npm账号，www.npmjs.com/，选择sign up

  • 在命令行登录,输入账号密码：

    • npm login

1676885414447.png

- 修改package.json中的版本号，关键词等

  • 发布到npm registry中

    • npm publish

  • 更新仓库：

    1. 修改版本号
    2. 重新发布

  • 删除发布的包

    • npm unpublish
    • npm deprecate
avatar
文章
阅读
粉丝