介绍
在前端开发中，我们常常使用 npm 来管理依赖。有时，我们在使用多个依赖时，依赖包之间会存在版本冲突的问题。在这种情况下，@pnpm/hoist 这个工具就派上了用场。
@pnpm/hoist 是一个用于处理依赖版本冲突的工具，它可以将依赖安装到一个目录，并将相同版本的依赖移动到同一个目录中，从而避免冲突。
安装
在使用 @pnpm/hoist 之前，我们需要先安装 pnpm。
npm install -g pnpm
安装完成后，我们就可以安装 @pnpm/hoist 了。
pnpm install -g @pnpm/hoist
使用
hoist 命令
在安装了 @pnpm/hoist 后，我们可以使用 hoist 命令来执行 hoisting 操作。例如：
pnpm hoist
这个命令会将依赖项 hoisting 到一个目录中。默认情况下，hoisting 后的依赖会被安装到 node_modules/.hoisted 目录中。如果需要修改 hoisted 目录的名称，可以使用 --hoisted-directory 选项：
pnpm hoist --hoisted-directory=my-hoisted
配置文件
@pnpm/hoist 可以通过配置文件来指定 hoisting 的规则。默认情况下，@pnpm/hoist 会识别 package.json 中的 dependencies 和 devDependencies 字段，并将它们安装到 node_modules/.hoisted 目录中。
如果需要自定义 hoisting 规则，可以在项目根目录下创建一个名为 pnpmfile.js 的文件，并在其中指定 hoisting 的规则。
例如，在以下的项目结构中，我们需要保留 vue 和 vuex 官方版本，同时可以 hoisting 其他依赖。
project/
├── node_modules/
├── package.json
├── pnpmfile.js
└── src
├── index.js
└── store.js我们可以在 pnpmfile.js 中添加以下内容来实现 hoisting：
-- -------------------- ---- -------
-------------- - -
------ -
-----------
-
-
-------- ----------- ----- -
-- --------- --- ----- -- -------- --- ------- -
------ ---
-
---------------- - -----------------------
------------------- - --------------------------
------ ---
-
-------- ----- ------ -
-- ------- ------ ----
----- ------- - --
--- ------ ------- -- ----- -
-- ---------------------------- -- ----------------------------- -
---------------- - -------------
- ---- -
----------------------------- - -------------
-
-
------ -------
-在上面的代码中，我们通过定义 readPackage 函数来实现 hoisting。readPackage 函数会被 @pnpm/hoist 调用，输入参数是 package.json 中的内容。在函数中，我们判断了 pkg.name 是否等于 vue 或 vuex，如果等于，则直接返回原内容。否则，我们使用 hoist 函数将 dependencies 和 devDependencies 中的内容 hoisting 到 node_modules/.hoisted 目录中。如上代码中的 hoist 函数，我们为每个 hoisted 的依赖都添加了前缀 hoisted-，以示区分。这个前缀可以是任何的前缀，只要不与其他依赖包的名称冲突即可。
示例
下面是一个简单的示例，我们可以使用 @pnpm/hoist 来解决依赖冲突的问题。
安装依赖
在项目根目录下，执行以下命令来安装依赖：
pnpm install react@16.14.0 react-dom@16.14.0 @react-pdf/renderer
运行应用
在安装依赖后，我们可以创建一个 index.js 文件，并添加以下内容：
-- -------------------- ---- -------
------ ----- ---- -------
------ -------- ---- -----------
------ - --------- ---- - ---- ---------------------
----- --- - -- -- -
------ -
----------
------
--------- ----------
-------
-----------
-
-
----------------
---- ---
-------------------------------
-接着，在项目根目录下创建一个 index.html 文件，并添加以下内容：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ------------ --- --------------- ------- ------ ---- ---------------- ------- ------------------------------------------------------------------------- ------- --------------------------------------------------------------------------------- ------- ------------------------------------------------------------------------------------------- ------- -------------------------- ------- -------
在这个示例中，我们将 react, react-dom 和 @react-pdf/renderer 这三个依赖 hoisting 到 node_modules/.hoisted 目录中。在 index.html 中，我们使用 hoisted 的依赖来加载应用所需的核心文件。因此，即使我们安装了其他版本的 react 和 @react-pdf/renderer，它们也不会影响到我们的应用。
最后，我们在项目根目录下启动一个本地服务器，并在浏览器中打开 index.html 文件即可运行应用。
npx serve .
总结
@pnpm/hoist 提供了一种可行的方式来解决依赖版本冲突的问题。通过 hoisting，我们可以将相同版本的依赖移动到同一个目录中，避免了冲突。除了使用 hoist 命令和配置文件外，@pnpm/hoist 还提供了其他选项，如 --recursive、--production、--no-shrinkwrap 等。希望本文可以帮助您更好地理解和使用 @pnpm/hoist。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedaa0eb5cbfe1ea0610314