yarn workspace的原理剖析以及简单使用

news/2024/7/19 12:58:34 标签: npm, js

随着项目的不断增大,子项目拆分的越来越多,开发过程可能会遇到如下的两个问题:

  • 多个项目具有相同的外部依赖,导致重复安装,占用磁盘空间
  • 多个项目之间相互依赖,依赖之间的更新流程繁琐(需要发布到npm,或者使用npm link)

开源社区中有lerna这样的优秀的monorepo管理工具来解决这两个问题。但其实,这应该属于npm包管理工具自身的问题范围。所以作为后起之秀的yarn,就希望能够通过其原生的workspace去解决这些问题:

下面是一个基于yarn workspace测试项目的目录结构,可以看出,虽然有foobar两个子项目,但二者的依赖共同维护于父项目之中。进而解决了多个项目重复外部依赖的问题。

test-yarn-workspace
├─ .gitignore
├─ node_modules // 该目录下包含了foo、bar两个子项目的所有依赖。
├─ package.json
├─ packages
│  ├─ bar
│  │  ├─ index.html
│  │  ├─ main.js
│  │  ├─ package.json
│  │  └─ webpack.config.js
│  └─ foo
│     ├─ App.vue
│     ├─ index.html
│     ├─ main.js
│     ├─ package.json
│     └─ webpack.config.js
└─ yarn.lock

值得注意的,针对于上述的项目,yarn仅仅是维护了目录结构,实际上,javascript的模块查找过程中,若当前node_modules中找不到对应的依赖,则会去父级目录查找。即实现公共依赖这一功能的核心其实是node_modules的查找机制。

比如某个文件所在路径是: ‘/home/ry/projects/foo.js’ ,当按照如下方式引用模块 require(‘bar.js’),那么会依次查找以下路径
/home/ry/projects/node_modules/bar.js
/home/ry/node_modules/bar.js
/home/node_modules/bar.js
/node_modules/bar.js

针对于第二个问题,即解决多个项目之间的依赖,yarn同样采用了软连接的方式。即将/node_modules/foo作为/packages/foo的软连接,进而实现packages内的相互依赖。
在这里插入图片描述
以上,在父项目的node_modules目录中创建packages/foo的软连接。即让其他子项目可以直接依赖于foo。

比如bar中可以这样直接把foo作为其依赖

json">{
  "name": "bar",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "foo": "1.0.0"
  },
  "devDependencies": {
    "webpack": "^5.23.0",
    "webpack-cli": "^4.5.0"
  }
}

值得注意的,根据以上的分析,packages中子项目的目录结构应该不会再有node_modules,因为他们的依赖都在父项目中。我们看到的目录结构也确实如此。但当子项目中依赖的模块有命令行工具时候,比如webpack-cli,依旧会生成这个目录。

test-yarn-workspace
├─ .gitignore
├─ package.json
├─ packages
│  ├─ bar
│  │  ├─ index.html
│  │  ├─ main.js
│  │  ├─ node_modules
│  │  │  └─ .bin
│  │  │     ├─ webpack
│  │  │     ├─ webpack-cli
│  │  │     ├─ webpack-cli.cmd
│  │  │     └─ webpack.cmd
│  │  ├─ package.json
│  │  └─ webpack.config.js
│  └─ foo
│     ├─ App.vue
│     ├─ dist
│     │  ├─ index.html
│     │  ├─ main.js
│     │  └─ main.js.LICENSE.txt
│     ├─ index.html
│     ├─ main.js
│     ├─ node_modules
│     │  └─ .bin
│     │     ├─ webpack
│     │     ├─ webpack-cli
│     │     ├─ webpack-cli.cmd
│     │     └─ webpack.cmd
│     ├─ package.json
│     └─ webpack.config.js
├─ README.md
└─ yarn.lock

以上的目录结构中子项目出现了node_modules是因为.bin文件夹中的cli命令不会向node_modules一样去自动查找父目录中的文件。

参考:https://classic.yarnpkg.com/en/docs/workspaces/


http://www.niftyadmin.cn/n/1382637.html

相关文章

重拾Ruby—新的征程

作家格拉德威尔在《异类》一书中指出:“人们眼中的天才之所以卓越非凡,并非天资超人一等,而是付出了持续不断的努力。1万小时的锤炼是任何人从平凡变成超凡的必要条件。“他将此称为“一万小时定律”。要成为某个领域的专家,需要1…

oracle ORA-00604/ORA-01653

问题描述:ORA-00604: error occurred at recursive SQL level 1ORA-01653: unable to extend table SYS.AUD$ by 8192 in tablespace SYSTEMORA-02002: error while writing to audit trailORA-00604: error occurred at recursive SQL level 1ORA-01653: unable to…

Workspaces can only be enabled in private projects.

出现这个错误是因为你使用了yarn的workspace,但并未将工程标记为private。 // 在以下代码中添加private字段,并设置为true,即可。 {"name": "test-workspace","workspaces": ["packages/*"],"…

JQZoom

UI采用jQuery插件 习惯网购的朋友都深有体会。大部分皇冠级淘宝卖家都是图片控。京东商城的放大图效果也是吸引消费者的法宝之一。京东商城产品展示页支持多图切换并放大代码,放大功能的核心代码为jQzoom,当把鼠标移到下边的小图上的时候,上边…

node-sass gyp ERR! find Python

node-sass这个包不同于普通的npm包,他的源码是C实现的,因为编译Sass需要使用LibSass,后者是C语言实现的。node-sass实际是调用LibSass进而实现编译sass文件的。 node-sass代码主要是通过C实现的 固Node-sass 是需要编译的。 考虑到平台兼容问…

jQuery 学习之路(4):事件

一、文档载入事件 二、事件绑定 三、事件对象 四、浏览器事件 五、表单事件 六、键盘事件 七、鼠标事件 转载于:https://www.cnblogs.com/tianyajuanke/p/3724921.html

mybatis一对一和一对多实例

一对一&#xff1a;<association></association> 一对多&#xff1a;<collection></collection> ClassMapper.xml: <resultMap type"com.taobaoo.school.domain.edu.XjClass" id"classMap"> <id property"id" …

《软件需求工程(第2版)》一2.2 软件开发过程模型

2.2 软件开发过程模型 软件开发过程模型是为获得高质量的软件系统所需完成的一系列任务的框架。它规定了完成各项任务的工作步骤。在软件工程的初期&#xff0c;软件生命期这一概念被提出。这是用标准的形式表示和定义了软件生存过程。所谓软件生命期是指软件从软件计划开始&am…