前言
在前端开发过程中，我们常常使用 npm（Node.js Package Manager）来管理项目的依赖。但是，当我们的项目越来越大，分散在多个 package 中时，如何将它们协同工作、管理依赖、以及提高代码复用性就成为了一个难题。npm 为我们提供了 workspaces 来解决这个问题，本篇文章将为大家详细介绍 npm 包 workspaces 的使用教程。
什么是 npm workspaces？
npm workspaces 是 npm 用来管理 monorepo（单一代码库）中多个 package 的功能。它允许我们在项目的根目录下指定多个 package，然后通过一个统一的命令集合来管理 package 的依赖关系。其中，每个 package 都有自己的 package.json，可以独立的进行调试、测试和发布等操作。
如何使用 npm workspaces？
1. 初始化项目
首先，我们需要在项目的根目录下创建一个 package.json 文件和多个 package 目录（例如：packages/foo、packages/bar）。
在 package.json 中，我们需要设置 "private": true 以禁止 package 的发布，然后，再设置 "workspaces"，指定 package 的路径，例如：
{
"private": true,
"workspaces": [
"packages/*"
]
}其中，"packages/*" 表示指定项目中所有在 packages 目录下的 package。
2. 设置 package 之间的依赖关系
假设有两个 package，一个名为 foo，另一个名为 bar，现在我们需要在 foo 中使用 bar，那么我们在 foo 中需要运行以下命令：
npm install --save ../bar
这会在 foo 的 package.json 中添加 bar 的依赖、生成一个 node_modules 目录，并将 bar 安装在该目录下。
3. 执行命令
npm workspaces 提供了一组命令来管理 package。
• npm install：安装所有 package 的依赖。
• npm run：运行指定 package 中的脚本。例如：npm run foo。
• npm test：运行所有 package 中的测试脚本。
• npm publish：发布指定 package。
4. 示例代码
以使用 React 来举例，我们可以创建两个 package，其中一个名为 components，用来放置 React 组件；另一个名为 client，是一个 React 应用程序。我们需要在 client 中使用 components 中的 React 组件。
首先，在项目的根目录下创建一个 package.json 和两个目录：packages/components 和 packages/client。
然后，我们在 components 中创建 React 组件，并在其中的 package.json 中，设置依赖的 React 版本：
{
"name": "@my-org/components",
"version": "1.0.0",
"dependencies": {
"react": "^16.8.6",
"react-dom": "^16.8.6"
}
}在 client 中，我们也需要设置相同版本的 react 和 react-dom 依赖，并使用 components 中的 React 组件：
-- -------------------- ---- -------
-
------- -----------------
---------- --------
--------------- -
--------------------- ---------
-------- ----------
------------ ---------
-
-然后，我们在 client 中的 index.js 中引用 components 中的组件：
-- -------------------- ---- -------
------ ----- ---- ---------------------
-------- ----- -
------ -
-----
----------- --
------
--
-最后，我们运行以下命令来安装依赖：
npm install
然后，就可以使用以下命令来运行 React 应用程序：
npm run client
至此，我们就成功使用 npm workspaces 来协同管理多个 package 了。
总结
npm workspaces 是一个非常实用的功能，它可以帮助我们更好地管理复杂的项目结构，并提高代码复用性和维护性。在使用过程中，我们需要注意每个 package 中的依赖关系以及 package 的版本控制，同时，也需要根据实际情况来灵活配置 workspaces 参数。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600556b181e8991b448d37ba