政务服务和数字化建设局网站高端网站建设 上海

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

一、npm 软链接

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

查看当前全局有什么包：

npm ls -g

（一）全局链接包

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

cd my-npm-package

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

npm link

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

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

cd target-project

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

npm link my-npm-package

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

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

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

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

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

（三）断开软链接

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

npm unlink -g my-npm-package

二、pnpm 软链接

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

查看当前全局有什么包：

pnpm ls -g

（一）安装 pnpm

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

npm install -g pnpm

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

        初始化一个新的 pnpm 项目：

pnpm init -y

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

pnpm add lodash

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

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

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

                在代码中使用lodash：

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

（四）本地开发包的链接

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

cd my-pnpm-packagepnpm link

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

cd target-projectpnpm link my-pnpm-package

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

（三）断开软链接

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

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

踩坑记录

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

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

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

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