npm/pnpm软链接 - 技术栈

在前端开发的过程中，高效管理项目依赖是提升开发效率的关键。npm（Node Package Manager）和 pnpm（Performant npm）作为常用的包管理工具，它们的软链接功能为开发者提供了灵活且强大的依赖管理方式。下面我们将深入探讨 npm 和 pnpm 软链接的使用方法，并通过具体的代码示例来详细说明。

一、npm 软链接

npm 的软链接功能允许我们在全局环境和项目本地环境之间建立链接，这在开发可复用的 npm 包时非常实用。

查看当前全局有什么包：
bash 复制代码
npm ls -g

（一）全局链接包

假设我们正在开发一个名为my-npm-package的 npm 包，首先进入该包的项目目录：

bash 复制代码

cd my-npm-package

然后执行npm link命令，这会在全局的node_modules目录下创建一个指向my-npm-package的软链接：

bash 复制代码

npm link

（二）在项目中链接全局包

接下来，我们要在另一个项目中使用这个my-npm-package。先切换到目标项目的目录：

bash 复制代码

cd target-project

然后执行npm link <package - name>，这里的<package - name>就是我们之前创建的my-npm-package：

bash 复制代码

npm link my-npm-package

此时，my-npm-package就被链接到了target-project的node_modules目录中。在my-npm-package中修改代码，target - project中无需重新安装即可实时生效。例如，在my-npm-package中添加一个新的函数：

javascript 复制代码

// my - custom - package/index.js
exports.newFunction = () => {
    console.log('This is a new function');
};

在target-project中引入并使用这个新函数：

javascript 复制代码

// target - project/app.js
const myPackage = require('my - custom - package');
myPackage.newFunction();

运行target- project，就能看到新函数的输出。

（三）断开软链接

直接在你的包my-npm-package项目中，执行以下命令：

bash 复制代码

npm unlink -g my-npm-package

二、pnpm 软链接

pnpm 的软链接机制基于其独特的内容寻址存储机制，通过硬链接和符号链接实现高效的依赖共享。

查看当前全局有什么包：
bash 复制代码
pnpm ls -g

（一）安装 pnpm

如果尚未安装 pnpm，使用以下命令在全局安装：

bash 复制代码

npm install -g pnpm

（二）创建项目并添加依赖

初始化一个新的 pnpm 项目：

bash 复制代码

pnpm init -y

然后添加依赖，例如添加lodash：

bash 复制代码

pnpm add lodash

（三）使用软链接（依赖共享）

假设有两个项目project-A和project-B，project-A已经安装了lodash。在project-B中，当执行pnpm add lodash时，pnpm 不会重复安装，而是通过硬链接和符号链接从全局 store 关联lodash到project-B的node_modules中。

javascript 复制代码

# 在project-B中添加lodash
cd project-B
pnpm add lodash

在代码中使用lodash：

javascript 复制代码

// project - B/app.js
const _ = require('lodash');
const array = [1, 2, 3];
console.log(_.sum(array));

（四）本地开发包的链接

和 npm 类似，pnpm 也支持本地开发包的链接。假设我们在开发my-pnpm-package，先在my-pnpm-package目录下执行：

bash 复制代码

cd my-pnpm-package

pnpm link

然后在需要使用的项目中执行：

bash 复制代码

cd target-project

pnpm link my-pnpm-package

这样就可以在target-project中使用my-pnpm-package，并且实时同步代码修改。

（三）断开软链接

直接在你的包my-pnpm-package项目中，执行以下命令：

bash 复制代码

pnpm unlink -g my-pnpm-package

三、两者对比

npm 软链接简单直接，易于理解和上手，对于个人开发者快速测试 npm 包非常方便。但在大型项目中，由于其依赖管理相对松散，容易出现依赖冲突和版本不一致的问题。

pnpm 软链接则在大型项目和多项目环境中表现出色，其高效的依赖共享机制节省磁盘空间和安装时间。不过，pnpm 的存储和链接原理相对复杂，开发者需要花时间学习和适应。

npm 和 pnpm 的软链接功能各有特点，开发者应根据项目的实际情况和自身需求，合理选择使用 npm 或 pnpm 的软链接，以优化项目开发流程，提升开发效率。

四、注意事项

包管理工具一致性：使用 npm 发布的包，必须用 npm link 来链接；使用 pnpm 发布的包，必须用 pnpm link 来链接，不可混着用，否则会报错。这是因为 npm 和 pnpm 对依赖的存储和管理方式存在差异，混用会导致链接路径和解析方式不匹配。
环境清理：当不再需要软链接时，要注意正确清理环境。在 npm 中，使用npm unlink <package - name>来取消项目中对全局包的链接；在 pnpm 中，使用pnpm unlink <package - name>。如果不及时清理，可能会导致旧的链接残留，影响后续开发。
版本兼容性：无论是 npm 还是 pnpm，在使用软链接时都要注意包的版本兼容性。特别是在开发和测试过程中，不同版本的包可能会有不同的 API 和功能，确保链接的包版本符合项目需求，避免因版本问题导致运行时错误。

踩坑记录

我写了一个水印功能，并用 npm link 发布：

又在 Vue3 项目中使用npm link -g my-package链接，毫无疑问，报错了。

出现问题的原因是：我的 Vue3 项目是使用 pnpm 的，而链接又是用 npm，这样就混用了，不可以这样！！！

之后我用pnpm来链接，就完美解决了问题。