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

最后

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

相关推荐
red润5 分钟前
使用 HTML5 Canvas 实现动态蜈蚣动画
前端·html·html5
sg_knight12 分钟前
VSCode如何修改默认扩展路径和用户文件夹目录到D盘
前端·ide·vscode·编辑器·web
一个处女座的程序猿O(∩_∩)O22 分钟前
完成第一个 Vue3.2 项目后,这是我的技术总结
前端·vue.js
mubeibeinv22 分钟前
项目搭建+图片(添加+图片)
java·服务器·前端
逆旅行天涯29 分钟前
【Threejs】从零开始(六)--GUI调试开发3D效果
前端·javascript·3d
m0_748255261 小时前
easyExcel导出大数据量EXCEL文件,前端实现进度条或者遮罩层
前端·excel
长风清留扬1 小时前
小程序毕业设计-音乐播放器+源码(可播放)下载即用
javascript·小程序·毕业设计·课程设计·毕设·音乐播放器
web147862107231 小时前
C# .Net Web 路由相关配置
前端·c#·.net
m0_748247801 小时前
Flutter Intl包使用指南:实现国际化和本地化
前端·javascript·flutter
飞的肖1 小时前
前端使用 Element Plus架构vue3.0实现图片拖拉拽,后等比压缩,上传到Spring Boot后端
前端·spring boot·架构