【前端工程化】包管理工具

Leo_Lin___
230 阅读7分钟

包管理工具

npm

npm是当今使用最多的包管理工具，npm所管理的包的查看与学习：npm官网www.npmjs.com/或github。

npm拥有的配置文件
package.json

npm拥有的配置文件package.json记录了项目的名字，版本，描述，入口文件等信息。package.json的创建方式可以使用npm init或者使用对应框架的脚手架创建如vue cli。

  1. 基本字段：

    1. name用于记录项目名。

    2. description用于描述项目。

    3. version表示版本号，一般使用x.y.z表示，遵循semsever协议。

      x表示做了不兼容更新，在新版本下旧版本API可能无法使用。y表示添加了新功能，但仍然兼容旧版本API。z表示未添加新功能，仅做BUG修复。使用^x.y.z表示x不变，y和z都安装至最新以添加新功能/新特性。~x.y.z表示x和y不变，z安装至最新以修复BUG。

    4. author用于记录作者相关信息。

    5. license指定了开源协议。

    6. private表示是否为私有项目，设置为true则无法通过npm发布，可以用于防止误发布操作。

    7. main是程序入口，如指定使用require("axios")时候导入的入口文件，不设置的话默认为index.js。

  2. 高级字段

    1. scripts用于配置快捷命令脚本，比如启动和打包等。

      "script":{
    "start":"node ./main1.js" //配置后，控制台输入npm start即可执行node ./index.js命令
}

    2. dependencies表示生产环境和开发环境都需要的依赖，如vue和dayjs。

    3. devDependencies表示开发环境需要的依赖，如webpack和babel打包工具。使用方法如下。

      npm install webpack --save-dev //完整写法
npm install webpack -D //简写

    4. peerDependencies表示对等依赖，表示该包需要以另一个包为宿主，如Element-Plus需要以Vue3为宿主。

    5. engines用于配置Node和NPM的版本号，也可指定操作系统如Linux和Windows，但是实际上较少用。

    6. browserlist用于浏览器兼容性配置。

package.lock.json

该文件主要作用是用于锁定进行npm install时下载的包的版本号以及在缓存中查找该包的签名，同时记录所有包的依赖关系。示例如下。

"axios": {
"version": "1.6.8", "resolved":"https://registry.npmmirror.com/axios/-/axios-1.6.8.tgz", //远程仓库地址          
"integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==", //签名
"dev": true, 
"requires": { //记录依赖关系，有些用dependencies字段表示，他们之间存在差别，这里暂不做探究
    "follow-redirects": "^1.15.6",
    "form-data": "^4.0.0",
    "proxy-from-env": "^1.1.0"
  } 
}
npm install

原理：使用npm install的时候，如果有lock文件首先会检查依赖一致性，然后从package.lock.json（以下简称lock）找到包对应的签名，然后进行缓存搜索，如果找不到则从远程仓库registry下载，然后更改其签名。如果没有lock文件则从package.json中查找，并构建依赖关系，然后从registry中下载对应的包并解压到node_modules，同时更新package.lock.json。原理图如下。

image.png

这里需要对依赖一致性进行解释：如果lock文件中有一个包的版本为2.1.1，但是package.json中该包的版本为^1.1.2，那么这就是一个依赖不一致的情况，需要重新构建依赖关系并从registry仓库进行下载，在成功压缩至node_mudules后还会将lock文件中对应该包版本锁定为1.1.2。

使用方法：

npm install axios //生产环境和开发环境都安装axios
npm install webpack -g //全局安装webpack，会往系统内添加环境变量
npm常用命令
npm init //初始化
npm init -y //直接以默认形式初始化
npm install [package]
npm install [package] -D/--save-dev //仅开发环境安装
npm rebuild //重新构建
npm uninstall [package] //卸载
npm cache clean //清除缓存
npm config set registry https://registry.npmmirror.com //更换为淘宝镜像
npm config get registry //查看npm镜像
npm run [script] //运行scripts里面的脚本
npm发步包的流程
  1. 初始化项目
  2. npm官网需要有账号
  3. 如果是淘宝镜像需要将镜像更改为npm官方镜像
  4. 登录账号
  5. 发布

总流程如下：

npm init //使用npm初始化
npm config set registry https://registry.npmjs.org/ //更换为npm官方镜像
npm login //登录
npm publish //发布

yarn

yarn的出现主要是为了解决早期npm的缺陷，如没有缓存导致包的安装很慢，依赖混乱。

yarn的常用语法
npm install yarn -g //安装yarn
yarn install 
yarn install --force //强制重新下载所有包
yarn add [package]
yarn add [package] -D //仅开发环境安装
yarn remove [package] //删除某个包
yarn upgrade []/[package] //升级
yarn cache clean //清除缓存

cnpm

npm默认用的是国外的官方仓库，可以使用cnpm专门改变cnpm的镜像为淘宝镜像，在npm安装失效的时候使用cnpm进行安装。cnpm更改淘宝镜像如下。

cnpm config set registry https://registry.npmmirror.com //更换为淘宝镜像

npx

在项目内即node_modules里面的工具和全局安装的同一个工具同时存在时，需要使用项目内的工具而非全局安装的工具可以使用npx。使用项目内的工具的方式如下（webpack为例）。

//注意，直接在命令行中敲webpack用的都是全局安装的webpack
//方式一：手动切换至bin目录
cd ./node_modules/bin //切换至bin目录
webpack //开始打包
//方式二：npx
npx webpack //使用npx则自动使用项目内的webpack
//方式三：配置scripts
"scripts":{
    "build":"webpack" //注意这里不需要配置为"npx webpack" 因为只要是在package.json中配置的命令，都会首选在node_modules里面寻找命令，找不到才去全局寻找
}

注意，实际上高版本的webpack在使用的时候会先识别node_modules/bin里面的webpack，而不是全局安装的webpack。

pnpm

以往的包管理工具的痛点在于开发者电脑上往往存在多个项目，而各个项目之间又有许多相同的包，但是各个项目所包含的的包却无法进行复用，pnpm的出现解决了该痛点。

与pnpm原理相关的前置知识

  1. 硬链接

    硬链接指的是多个文件指向的是同一片实际的物理硬盘空间，一个文件修改，会导致其他文件也跟着变化。

  2. 软链接

    软链接即符号链接，是一类特殊的文件，该文件以绝对或相对路径的形式包含了实际指向一片物理硬盘空间的文件的地址，这类文件是不可修改的，如快捷方式。

pnpm的原理

传统的包管理工具创建的是扁平化的node_modules目录（以下简称m），如若下载一个包，该包依赖的所有包也会被添加至m中，这样就导致了开发者可以使用原本项目未添加的包，而package.json却又无记录，不安全。

而pnpm创建的是非扁平化的m。当install一个包后，如axios，m中会创建相应包的软链接，链接至m中的pnpm目录下axios@1.0.1目录下的axios文件夹。而该axios又硬链接至一片实际的物理硬盘空间。axios所依赖的其他包均会被下载至pnpm目录下，而axios所依赖的其他包会在axios@1.0.1目录下以软链接（软链接至pnpm目录下的某个包）的形式存在。同时，m/.pnpm目录中的各个包都会硬链接至pnpm的总仓库中对应包，方便各个项目之间包的复用。具体如图所示。

image.png

pnpm（左图）对比npm（右图）。

      

m/.pnpm目录中管理的包如下图，所有本项目添加的包都在该目录中，.pnpm目录下的包都会硬链接至pnpm总仓库store对应的包，使得不同项目之间的包可以相互复用。如下图。

image.png

.pnpm/axios@1.6.8中记录了axios硬链接，以及axios所依赖的包的软链接。如下图所示。

image.png

pnpm常用命令
npm install -g pnpm //安装pnpm
pnpm install //一键安装
pnpm add [package] //安装某个包
pnpm remove [package] //卸载某个包
pnpm run [script] //运行脚本
pnpm store path //获取活跃的store路径
pnpm store prune //在总仓库中删除没有项目使用的包，节省空间
avatar
文章
阅读
粉丝