首页 > 其他分享 >Yarn学习(三)Yarn Workspace介绍 + 适用场景 + 命令

Yarn学习(三)Yarn Workspace介绍 + 适用场景 + 命令

时间:2023-11-28 12:34:46浏览次数:35  
标签:node 场景 package modules Yarn js json yarn Workspace

 

 

介绍

Yarn 从 1.0 版开始支持 Workspace (工作区),提供的monorepo的依赖管理机制,用于在代码仓库的根目录下管理多个package的依赖。

Workspace 能更好的统一管理有多个项目的仓库,既可在每个项目下使用独立的 package.json 管理依赖,又可便利的享受一条 yarn 命令安装或者升级所有依赖等。更重要的是可以使多个项目共享同一个 node_modules 目录,提升开发效率和降低磁盘空间占用。

开启yarn workspace

workspaces 是 yarn 相对 npm 的一个重要优势(另一个优势是下载更快),它允许我们使用 monorepo 的形式来管理项目。

开启 workspace 的功能也比较简单,只需要在 package.json 里面将 private 设置为 true,并且规定好 workspaces 字段里面的子项目就好了。

复制代码
{
    ...
    private: true,
    workspaces: [
      "packages/*"
    ]
}
复制代码

private:根目录一般是项目的脚手架,无需发布,"private": true会确保根目录不被发布出去。

workspaces:声明workspace中package的路径。值是一个字符串数组,支持Glob通配符。其中"packages/*"是社区的常见写法,也可以枚举所有package: "workspaces": ["package-a", "package-b"]

当然,yarn workspace 没有规定你一定要放到 packages 目录下面。你也可以不使用通配符,直接手动声明每个子项目。

复制代码
{
    ...
    private: true,
    workspaces: [
      "packages/project1",
      "packages/project2"
    ]
}
复制代码

在安装 node_modules 的时候它不会安装到每个子项目的 node_modules 里面,而是直接安装到根目录下面,这样每个子项目都可以读取到根目录的 node_modules。

整个项目只有根目录下面会有一份 yarn.lock 文件。子项目也会被 link 到 node_modules 里面,这样就允许我们就可以直接用 import 导入对应的项目。

复制代码
- node_modules
  - project1
  - project2
  - project3
- packages
  - shared
    - src
      - index.ts
  - project1
    - node_modules
    - src
      - index.ts
    - package.json
  - project2
    - node_modules
    - src
      - index.ts
    - package.json
  - project3
    - node_modules
    - src
      - index.ts
    - package.json
- yarn.lock
- package.json
- tsconfig.json
复制代码

当然,如果你的子项目里面依赖了不同版本的包,那么也会在子项目的 node_modules 里面安装对应版本的包。比如根目录的 package.json 里面是 2.5 的 vue,而 project1 里面安装了 2.6 的 vue,那么就会在根目录的 node_modules 里面安装 2.5 版本,而 project 下面的 node_modules 安装 2.6 版本。

复制代码
- node_modules
  - [email protected]
- packages
  - shared
    - src
      - index.ts
  - project1
    - node_modules
      - [email protected]
    - src
      - index.ts
    - package.json
  - project2
    - node_modules
    - src
      - index.ts
    - package.json
  - project3
    - node_modules
    - src
      - index.ts
    - package.json
- yarn.lock
- package.json
- tsconfig.json
复制代码

如果多个子项目依赖了同一个包的不同版本,那么根目录里面安装的就是版本号最高的那个。

适用场景

1、零散的页面

这种场景就是前面说过的一些 H5 活动页,他们可能都依赖了 React、React-dom 等等,但又需要部署到不同的域名下面,这样就不方便用 React-router 来管理了。

所以这里我们就可以将他们放到同一个仓库里面,用 monorepo 的形式来管理这个仓库。

由于他们使用了相同的技术栈,那么 eslint、prettier,甚至 webpack 配置都可以提取到最外面,不用维护在每个项目里面。

以 create-react-app eject 之后的配置为例:

复制代码
- node_modules
  - react
  - react-dom
  - redux
  - lodash
  
- packages
  - project1
    - package.json
  - project2
    - package.json
    
- config
  - webpack.config.js
  - webpack.dev.config.js
  
- scripts
  - create.js
  - bin.js
  - build.js
  - start.js
  
- .eslintrc.js
- .prettierrc
- commitlint.config.js
- jest.config.js
- tsconfig.js
- package.json
- yarn.lock
复制代码

我们可以看到,通用配置都被提取到了最外层。

如果运行或者构建子项目,只需要在子项目的 package.json 里面这么配置。

 "start": "node ../../scripts/start.js",
 "build": "node ../../scripts/build.js",
 "test": "node ../../scripts/test.js"

2、前后端项目

有时候我们需要用 NodeJS 为自己开发的前端项目写一些简单接口,常常需要创建一个 server 项目,但这个项目功能很简单,也只有这个前端项目用。

那我们就不必把他们用两个仓库来管理,可以直接放到同一个仓库管理。

- website
  - package.json
- server
  - package.json
- package.json

在构建的时候,可以直接用 server 去渲染 website 最后构建出来的 index.html,这样只需要配置一份 nginx 就行了。

命令

1、执行某个项目下面的命令:yarn workspace <workspace_name> <command> xxx

复制代码
// 在foo中添加react,react-dom作为devDependencies
yarn workspace foo add react react-dom --dev

// 移除bar中的lodash依赖
yarn workspace bar remove lodash

// 运行bar中package.json的 scripts.test 命令
yarn workspace bar run test
复制代码

2、执行所有项目下面的某个命令要用:yarn workspaces <command> xxx(若某个package中没有对应的命令则会报错)

// 运行所有package(foo、bar)中package.json的 scripts.build 命令
yarn workspaces run build

3、安装依赖

安装整个项目的依赖和常规的 yarn 用法一样,直接 yarn install 就完事了。

如果你想安装一个依赖,那么分下面三种场景:

  1. yarn workspaces add package:给所有应用都安装依赖
  2. yarn workspace <workspace_name> add package:给某个应用安装依赖
  3. yarn add -W -D package:给根应用安装依赖 (-W: --ignore-workspace-root-check ,允许依赖被安装在workspace的根目录)

参考

Yarn Workspace 使用指南(优先)

Yarn Workspace使用指南知乎

使用 MonoRepo 管理你的前端项目

标签:node,场景,package,modules,Yarn,js,json,yarn,Workspace
From: https://www.cnblogs.com/onesea/p/17861643.html

相关文章

  • 通过项目中的实际例子,介绍 LocalStorage 在 Angular 开发中的使用场景
    笔者之前在掘金社区的技术文章,介绍过自己项目组中负责开发的一款基于Angular的电商SDK:Angular应用支持PWA(ProgressiveWebApplication)特性的开发步骤分享Angular应用的搜索引擎优化(SEO)实战指南本文笔者会分享自己项目过程中,在设计这款SDK时使用Web开发领域的......
  • 零数科技应用入选2023全球数商大会数据要素典型应用场景优秀案例
    11月25-26日,2023全球数商大会在上海召开。本届大会以“数联全球、商通未来”为主题,上海市委副书记、市长龚正出席大会并宣布大会开幕,国家发展改革委党组成员,国家数据局党组书记、局长刘烈宏,上海市副市长陈杰致辞。2023数据交易节于11月25日同期举办,并颁布年度数据要素典型应用场景......
  • yarn : 无法加载文件 C:\Program Files\nodejs\yarn.ps1,因为在此系统上禁止运行
    问题分析:这个错误提示说明在电脑系统上禁止运行PowerShell 脚本,因此导致无法加载Yarn的安装脚本。这是由于系统的执行策略(ExecutionPolicies)设置所导致的。解决方法:1.以管理员身份运行PowerShell。2.在窗口中执行 set-ExecutionPolicyRemoteSigned。3.执行完成后,......
  • yarn的安装与禁止运行脚本报错
    一、yarn1.安装与卸载npminstall-gyarnnpmuninstallyarn-g//yarn卸载2.npm存在的一些不足:npminstall下载速度慢,即使是重新install时速度依旧慢同一个项目,安装的无法保持一致性。原因是因为package.json文件中版本号的特点导致在安装的时候代表不同的含义。使用npm......
  • 图解Redis适用场景
    Redis以其速度而闻名。1业务数据缓存1.1通用数据缓存string,int,list,map。Redis最常见的用例是缓存对象以加速Web应用程序。此用例中,Redis将频繁请求的数据存储在内存。允许Web服务器快速返回频繁访问的数据。这减轻数据库的负载并提高应用程序RT。规模扩张时,缓存分......
  • 分析安科瑞Acrel-EIOT能源物联网平台的工作原理以及应用场景—李笑曼
    安科瑞电气股份有限公司李笑曼壹柒捌贰壹壹贰玖柒叁叁1功能Acrel-EIoT能源物联网开放平台是一套基于物联网数据中台,建立统一的上下行数据标准,为互联网用户提供能源物联网数据服务的平台。用户仅需购买安科瑞物联网传感器,选配网关,自行安装后扫码即可使用手机和电脑得到所需的行......
  • 大量索引场景下 Easysearch 和 Elasticsearch 的吞吐量差异
    最近有客户在使用Elasticsearch搜索服务时发现集群有掉节点,并且有master收集节点信息超时的日志,节点的负载也很高,不只是data节点,master和协调节点的cpu使用率都很高,看现象集群似乎遇到了性能瓶颈。查看了Hot_threads,发现大量线程被权限验证相关的类和方法占用,主要在RB......
  • 大量索引场景下 Easysearch 和 Elasticsearch 的吞吐量差异
    最近有客户在使用Elasticsearch搜索服务时发现集群有掉节点,并且有master收集节点信息超时的日志,节点的负载也很高,不只是data节点,master和协调节点的cpu使用率都很高,看现象集群似乎遇到了性能瓶颈。查看了Hot_threads,发现大量线程被权限验证相关的类和方法占用,主要在......
  • 中伟视界:AI盒子智能分析算法解决油气管道长无人场景下的人车监测问题
        在油气管道长又无人的场景下,人和车的监测问题一直是一个难题。传统的监测手段往往存在盲区和误报问题,给管道运行安全带来了一定的隐患。然而,随着人工智能技术的不断发展,利用AI盒子的智能分析算法可以有效解决这一问题。AI盒子可以通过视频监控系统实时检测管道周边的人......
  • 并发编程场景题目
    (1)发红包,100块钱,10个红包,要求第一个抢到红包的用户,得到的金额最多?解答:可以先将每个红包的金额计算出来,然后放到一个并发队列中concurrentLinkedQueue,每个用户就是一个线程,每个线程去操作并发集合,集合为空的线程就返回红包派送完了。(2)搜索引擎:公司有三种搜索引擎,每个搜索引擎的搜......