npm里存在感较低的角色- workspace

2024年第一篇文章，写于 2024-01-01 00:23分，本期的主角是 workspace（工作区）。大家可能不太了解它，但是说一个点应该可以勾起大家的回忆，就是lerna。他们都是用来将最大的工作区域拆分成很多个小的工作区域。这种拆分思想，对于特定的项目来说是比较管用的。而这些特定的项目都有一个明显的特点，就是大应用由无数个耦合度较低的小应用组成。比如组件库、中台类的项目等等，这样用户就可以选择性的安装其中某一个模块就可以了，也是一种按需使用的解决方案。

什么是workspace？

javascript 复制代码

/**
    | - bigProject
        | - package.json
        | - node_modules
        | - package
            | - smallProject1
                | - package.json
            | - smallProject2
                | - package.json
*/

在上面的图中，我们存在3个工作区（workspace），分别是bigProject、smallProject1、smallProject2。那什么目录可以被叫做工作区呢？

如果一个目录拥有 package.json文件，那么这个目录就可以被叫做workspace。

如何创建workspace？

命令如下：

javascript 复制代码

npm init -w 小工作区的目录

比如还是以上图为例，打开bigProject项目的终端，然后执行：

javascript 复制代码

npm init -w ./package/smallProject1

npm init -w ./package/smallProject2

这样，我们就在bigProject大的工作目录下创建了2个小的workspace。我们可以通过以下命令来检测是否创建成功：

javascript 复制代码

npm ls --workspaces

如果出现了下面类似的图形，那恭喜你创建workspace成功了。

如何管理workspace之间的依赖关系？

如果我们给smallProject1安装依赖，实现这个功能有2种方式，如下：

javascript 复制代码

// 方式一：在bigProject根目录下执行以下命令
npm install moment -w smallProject

// 方式二：先进入到smallProject目录下，然后再执行npm install
cd smallProject
npm install moment

在第一种方式里，smallProject更准确的来说应该叫做"工作区的名称"，也就是各工作区下的package.json文件里的name的值。

这两种安装依赖的方式完全没区别，因为依赖都会被安装到根目录下（bigProject），类似下图：

因为所有的依赖，各workspace下的依赖都会被安装到根目录下，所以，所有的workspace是共享依赖的。

如何运行workspace下的命令

依然是2种方式，一种是 cd 到workspace目录下，然后执行具体的command。另一种是直接配置在上一层的workspace目录下：

javascript 复制代码

// 修改bigProject目录下的pacakge.json
{
    "scripts": {
        "dev": "npm run dev --workspace=smallProject1"
    }
}

这样，当我们在bigProject目录下运行 npm run dev时，实际上就是运行的smallProject目录下的npm run dev的命令。

那有没有一种命令，可以让所有的workspace都执行一遍 npm run dev呢？答案是肯定的，我们只需要做出如下修改即可：

javascript 复制代码

{
    "scripts": {
        "dev": "npm run dev --workspaces"
    }
}

此时所有的workspace都会执行一遍自己的 npm run dev命令，需要注意的是，如果有一个工作区的命令执行报错，那也不会终止剩余的workspace的运行。

跟workspace相关的npm命令有哪些？

还是很多的，主要是npm将workspace作为配置选项传递给大部分的npm command。比如 npm install --workspace，npm publish --workspace，npm list --workspaces等等，具体的请参考npm command。

最后

好啦，本期的分享到这里就结束啦，在这里祝大家元旦快乐，希望我的分享对你有帮助，我们下期再见啦～～