前端包管理器总览

听枫_
677 阅读7分钟

npm

Bring the best of open source to you, your team and your company.

img

一些命令

列出全局安装的包：

npm list -g --depth 0

yarn

yarn 是一个由Facebook、Google、Exponent和Tilde构建的新的JavaScript包管理器。它的出现是为了解决历史上npm的某些不足(比如npm对于依赖的完整性和一致性的保证,以及npm安装过程中速度很慢的问题)

img

pnpm

pnpm == p(performant) + npm,代表高性能的 npm

Fast, disk space efficient package manager | pnpm

项目初衷 | pnpm

硬链接

在Linux的文件系统中，保存在磁盘分区中的文件不管是什么类型都给它分配一个编号，称为索引节点号(Inode Index)，在 Linux 中，允许多个文件名指向同一索引节点，一般这种连接就是硬链接。

硬链接的作用是允许一个文件拥有多个有效路径名，这样用户就可以建立硬链接到重要文件，以防止“误删”的功能。其原因如上所述，因为对应该目录的索引节点有一个以上的链接。只删除一个链接并不影响索引节点本身和其它的链接，只有当最后一个链接被删除后，文件的数据块及目录的链接才会被释放。也就是说，文件真正删除的条件是与之相关的所有硬链接文件均被删除。

语法：ln filename [linkname ]

软链接

有点像是 window 中的快捷方式，它本身也是一个文件，只不过保存的是它指向的文件的全路径，访问时将通过它访问所指向的文件路径以打开指定文件，所以当删除源文件时，打开它将报错指示无相关路径。

语法：ln -s filename [linkname ]

pnpm对硬链接，软链接的运用

参考：昨晚，我体会了没有 pnpm 的痛 - 掘金 (juejin.cn)

我只需要express 这一个包

image-20220220221118974

可以看到，node_modules 下结构和我们期望的几乎一样了，很简洁，之前的那些包被放到了 .pnpm 里,其实这里的 express 就是个软链接，执行 ls -hl 查看其详细信息, 可以看到它指向了 .pnpm 下的express 文件，所以说 pnpm 的软链接就是将 node_modules 里的文件软链接到对应的 .pnpm/[package_name]@version/node_modules/[package_name] 中。

image-20220220221315711

而 .pnpm 中的文件则是一个对源文件的硬链接，我来验证下，首先找到 pnpm-test 项目下找到 express 的文件路径，通过终端指令 stat -s index.js读取其详细信息，发现其 index.js inode节点为 st_ino=5206568 并且有8个相同的硬链接，然后建一个新项目，并安装express,发现 其节点inode 仍然是st_ino=5206568，但是硬链接数量增加到了 9 个，可以看出express 下的index.js 实际上是被复用的。

那么，pnpm 下载的源文件到底在哪里呢，以 macOS 为例，会默认安装到当前用户的根目录下，是一个隐藏文件，你也可以通过修改配置来更换其位置 pnpm config set store-dir /path/to/.pnpm-store

npx

npm 从5.2版开始，增加了 npx 命令

Node 自带 npm 模块，所以可以直接使用 npx 命令。万一不能用，就要手动安装一下。

$ npm install -g npx

why:question:

npx 想要解决的主要问题，就是调用项目内部安装的模块。比如，项目内部安装了测试工具 Mocha。

$ npm install -D mocha

一般来说，调用 Mocha ，只能在项目脚本和 package.json 的scripts字段里面， 如果想在命令行下调用，必须像下面这样。

# 项目的根目录下执行
$ node-modules/.bin/mocha --version

npx 就是想解决这个问题，让项目内部安装的模块用起来更方便，只要像下面这样调用就行了。

$ npx mocha --version

npx 的原理很简单，就是运行的时候，会到node_modules/.bin路径和环境变量$PATH里面，检查命令是否存在。

由于 npx 会检查环境变量$PATH，所以系统命令也可以调用。

# 等同于 ls
$ npx ls

注意，Bash 内置的命令不在$PATH里面，所以不能用。比如，cd是 Bash 命令，因此就不能用npx cd。

轻松运行本地安装的包

如果你想执行一个本地安装的包，你需要做的就是输入：

$ npx your-package

npx 将检查本地项目二进制文件中是否存在<command>或<package>存在$PATH，如果存在，它将执行它。

执行以前未安装的包

另一个主要优点是能够执行以前未安装的包。

让我们通过运行来测试一下：

$ npx cowsay wow

npx-cowsay-wow-npm-vs-npx

直接从 GitHub 运行代码

执行-gist-script-with-npx

可以使用 npx 运行任何 GitHub gists 和存储库

避免全局安装模块

除了调用项目内部模块，npx 还能避免全局安装的模块。比如，create-react-app这个模块是全局安装，npx 可以运行它，而且不进行全局安装。

$ npx create-react-app my-react-app

上面代码运行时，npx 将create-react-app下载到一个临时目录，使用以后再删除。所以，以后再次执行上面的命令，会重新下载create-react-app。

下载全局模块时，npx 允许指定版本。

总结

npx 帮助我们避免版本控制、依赖问题和安装我们只想尝试的不必要的包。

它还提供了一种清晰而简单的方法来执行包、命令、模块甚至 GitHub gists 和存储库。

nrm

nrm（npm registry manager）是npm的镜像管理工具，有时候国外的资源太慢，使用这个就可以快速地在npm源间切换。

$ npm install -g nrm
  1. 查看当前源

执行命令nrm ls查看可选的源。其中带*号的是当前使用的源，下图表明当前源为rh。

image-20220221232454137

或者直接使用nrm current命令，也可以查看当前源。

在这里插入图片描述

  1. 切换 如果要切换到taobao源，执行命令nrm use taobao。
  2. 增加 你可以增加定制的源，特别适用于添加企业内部的私有源，执行命令nrm add <registry> <url>，其中registry为源名，url为源的路径。
  3. 删除 执行命令nrm del <registry>删除对应的源。
  4. 测试速度 你还可以通过nrm test <registry>测试响应源的响应时间。

image-20220221234652256

ni

@antfu/ni - npm (npmjs.com)

npm i in a yarn project, again? F**k!

ni - use the right package manager

npm i -g @antfu/ni

ni

ni - install

ni

# npm install
# yarn install
# pnpm install
ni axios

# npm i axios
# yarn add axios
# pnpm i axios

...

nvm

Node Version Manager (Node 版本管理器)

nvm allows you to quickly install and use different versions of node via the command line.

$ nvm use 16
Now using node v16.9.1 (npm v7.21.1)
$ node -v
v16.9.1
$ nvm use 14
Now using node v14.18.0 (npm v6.14.15)
$ node -v
v14.18.0
$ nvm install 12
Now using node v12.22.6 (npm v6.14.5)
$ node -v
v12.22.6

If you want to install io.js:

nvm install iojs

nvm 是 Mac 下的 node 管理工具，有点类似管理 Ruby 的 rvm，如果需要管理 Windows 下的 node，官方推荐使用 nvmw 或 nvm-windows.(一定要卸载已安装的 NodeJS，否则会发生冲突。然后下载 nvm-windows 最新安装包，直接安装即可。)

tnpm/tyarn

目前在国内前端领域，tnpm 有 2 个含义：

  • 阿里巴巴及蚂蚁集团 企业私有 NPM 服务。（起源为 taobao npm）
  • 腾讯 企业私有 NPM 服务。（tencent npm）

但它们均为企业内部服务，只能通过各自内网进行安装。

传输

快传网站

奶牛快传 | 免费大文件传输工具 上传下载不限速 (cowtransfer.com)

局域网共享

连接同一个 wifi,找到要共享的文件夹，右击 => 属性 => 共享 => 勾选“共享此文件夹” => 选择共享用户，默认 Everyone => 应用、确认。

smb://ip地址 => 连接 => 如果链接成功则需要输入设备账号密码来进行验证

用过 M1 的同学可能听说过 ssd swap 这个概念，它是 macos 系统同内存规格下比 window 系统更加流畅的原因之一，当系统应用占用过多，内存不够时 window 会有明显的卡顿，macOS 系统却好很多，因为此时它会将暂时不用的应用缓存从内存中转移到 ssd 中，给内存腾出空间。

这个过程是无感知的所以你会发现明明开启了多个大型应用理论上早就超出了内存大小，可是依然不会有明显的卡顿，就是这个原因，特别是随着 ssd 性能的增强以及M1 芯片架构的改变，这个特性被更好的使用了，一方面这是个好事情，充分利用了ssd 性能以更小的内存换来比以往更好的使用体验，但是事情都是有两面性的，swap 的原理意味着它将带来更大的ssd 读写量，而一般 ssd 是有使用寿命的，也就是它的全盘写入次数是有上限的。

硬盘的寿命一般用 TBW （最大写入量）来表示

切换（synp）

imsnif/synp: Convert yarn.lock to package-lock.json and vice versa (github.com)

转换yarn.lock为package-lock.json，反之亦然。

**注意：**如果你只需要在这个方向（package-lock.json=> yarn.lock）进行转换，从 1.7.0 开始，Yarn 可以从 npm 的 package-lock.json 本地导入其依赖树，无需外部工具。使用yarn import命令。

yarn 和 npm 混用在部分特别依赖包管理器的项目中是有问题的，例如antfu的vitesse需要通过包的锁文件去判断具体用到那个包管理器然后用这个包管理器去自动安装具体的图标集依赖。当然除此之外还有两个包管理器的网络机制以及缓存机制和下载后的依赖分布也不同，如果特别依赖这些的项目也需要注意一下。推荐统一一个包管理器。

需要上传lockfiles文件到仓库中，因为这个文件主要用来锁默认的依赖版本，最好让别人的依赖和自己的依赖保持统一，这样的错误率最小。

杂项

快速删除 node_modules 的方法: ​

npm install rimraf -g       
rimraf node_modules

清除npm缓存：

npm cache clean -f

换源:

//官方
npm config set registry http://registry.npmjs.org

//淘宝
npm config set registry https://registry.npm.taobao.org

//发布Npm包时需要先切换回官方地址
avatar
文章
阅读
粉丝