热乎乎的 workspaces 替代 npm link 调试的新方式.png
目录
- 前言
- 认识 workspaces
- 如何给模块安装依赖
- 移除依赖
- 执行模块里面的 scripts
- monorepo
前言
作为一个前端，在工程化的项目里你肯定使用过很多很多的 npm package，不知道你有没有尝试开发过 npm package 或者研究下 npm package 的开发流程，如果你又经验，那么你一定很的熟悉 npm-link 这个命令。
我们本地化开发 npm package 不可能每次改了代码，都发布到 npm 商场去，所以 npm 提供给我们 npm-link 这个命令用来进行本地化开发。
但是 npm-link 有个缺点不利于调试代码，我们基本上必须开两个编辑器，一个编辑器改开发 package 的代码，另一个编辑器用来调试，照此推理，我们开发组件库几十个组件，难道要开几十个窗口，No，这不科学。
当然我们也可以把开发 package 的代码目录拖到调试目录中，来变相模拟 workspaces。
那就要问了，我们最理想开发目录是什么样子的；我们肯定想开发和调试在同一个项目下，等开发调试完成任何目录都不用动，直接发布就行了，而 npm 的新特性 workspaces 正好满足。
注意：workspaces 是 npm v7.x 也就是 Node@15.0.0 新增的功能，所以请保持你的本地环境版本大于它们。
认识 workspaces
现在假如我们开发一个 npm package 叫 calculator （计算器），且它只有四个基本的功能——加减乘除，我们看看在 workspaces 中如何对 calculator 进行调试。
- 首先创建一个目录同时初始化一个 package.json：
➜ Desktop mkdir calculator && cd calculator && npm init
- 创建加减乘除模块包
分别执行命令（一个一个创建）：
$ npm init -w packages/plus -y
$ npm init -w packages/minus -y
$ npm init -w packages/times -y
$ npm init -w packages/divide -y
也可以简单点，用一条命令：
$ npm init -w packages/plus -w packages/minus -w packages/times -w packages/divide -y
这个时候目录变成了：
➜ calculator tree
.
├── package.json
└── packages
├── divide
│ └── package.json
├── minus
│ └── package.json
├── plus
│ └── package.json
└── times
└── package.json
5 directories, 5 files
同时根目录下的 package.json 新增了 workspaces 字段：
"workspaces": [
"packages/plus",
"packages/minus",
"packages/times",
"packages/divide"
]
如果我们不想让 workspaces 字段太多，可以改成这样：
"workspaces": [
"packages/*"
]
workspaces 字段是留给 npm install 来创建软连接使用的，下面会讲到。
- 新增五个文件
新增五个 index.js 文件，目录现在如下：
➜ calculator tree
.
├── package.json
├── packages
│ ├── divide
│ │ ├── index.js
│ │ └── package.json
│ ├── minus
│ │ ├── index.js
│ │ └── package.json
│ ├── plus
│ │ ├── index.js
│ │ └── package.json
│ └── times
│ ├── index.js
│ └── package.json
└── index.js
5 directories, 10 files
为了支持 ESM 我们手动改写所有 package.json 新增一个字段：
"type": "module",
- 模块的实现
我们这里给出加法的代码，plus 目录的 index.js 文件内容:
export default (a, b) => a + b;
其他三个函数同理。
- 验证程序的正确性
我们怎么验证程序的正确性呢，当然是分别调用四个模块验证了，所以 安装四个模块，执行命令：
npm install
熟悉的 node_modules 文件夹出现了，但是里面的文件夹和常见的却有所不同。
通过命令行终端甚至看的更清楚些：
其实就是把 node_modules 这四个文件夹链接到了 packages 目录下对应的文件夹，这是一种软链接技术（即让 packages 里面的所有模块都软链到 node_modules 目录），就像 Windows 桌面的快捷方式一样。注意，我们更改 packages 文件夹下的文件 node_modules 文件夹自动更新。
根目录下 index.js 文件里调试加法：
import plus from "plus";
console.log(`1 + 1 = ${plus(1, 1)}`)
其他三个方法类似使用，不再演示。
如何给模块安装依赖
比如除法使用 number-precision 保留精度：
$ npm install number-precision --workspace divide
# 也可简写为
$ npm i number-precision -w divide
如果要给所有模块同时安装 dayjs 这个依赖：
# 注意 workspaces 这里多个 `s`
$ npm install dayjs --workspaces
# 也可简写为
$ npm i dayjs -ws
移除依赖
将 divide 模块中的 number-precision 依赖移除：
➜ calculator npm uninstall number-precision -w divide
执行模块里面的 scripts
假设 divide 模块包里面的 package.json 文件中 scripts 字段为：
{
"scripts": {
"dev": "node index.js"
}
}
那么可以通过下面的命令启动 divide 模块包里面的 dev 脚本
$ npm run dev -w divide
OK，workspaces 的基本使用差不多就是辣么多，使用 workspaces 进行开发调试只是小菜，接下来看看 workspaces 真正的核心应用。
monorepo
monorepo 即单体仓库，这里有一份学习资料，https://semaphoreci.com/blog/what-is-monorepo
如果你经常在 GitHub 上学习，你会发现前端很多库的源码都是 monorepo 架构的，比如说 Vue、React 等等。
之所以 monorepo 流行就在于，项目过大管理进入了困难，如果维护一个单体仓库太过庞大了，维护多个仓库又太过繁琐，所以 monorepo 出来了，让你维护一个仓库，但是一个仓库切分为好多个 packages，这样便于你维护的同时，部分功能也好切割出去，之前 monorepo 最好的工具是 yarn ，现在好了 npm 已经开始原生支持了。
总结
今天，我们学习通过 workspaces 替代 npm link 调试的新方式，让你不在饱受切编辑器之苦，但 workspaces 真正大放异彩的地方，确实和 monorepo 配合使用，作为流行库组织代码的流行方式。
网友评论