草庐IT

Vue3 企业级优雅实战 - 组件库框架 - 1 搭建 pnpm monorepo

程序员优雅哥 (youyacoder) 2023-03-28 原文

前两篇文章分享了基于 vite3 vue3 的组件库基础工程 vue3-component-library-archetype 和用于快速创建该工程的工具 yyg-cli,但在中大型的企业级项目中,通常会自主搭建这些脚手架或加速器。优雅哥希望每位前端伙伴能知其所以然,故接下来的文章将进入 Vue3 企业级优雅实战 系列,整个系列将包括五大部分:

首先会分享如何从 0 开始搭建一套组件库基础工程,即如何从 0 实现 vue3-component-library-archetype

1 组件库工程应该具备的功能

在参考 Element PlusAnt DesignVan UIVue3 开源 UI 项目后,优雅哥认为一套企业组件库工程需要具备如下功能:

  1. 组件库的开发:这是最基础的,组件库工程必须要支持组件库的开发,在工程中开发各种组件;
  2. 组件库的构建:组件库开发完成后,不可能让所有使用该组件库的项目都使用源码的方式引入到各个项目中,而是要将其构建打包后发布到私服或 npm 上,各个项目通过依赖的方式引入使用。在这个过程中,就涉及类型定义的提取、不同模块化规范的打包等;
  3. 组件库的发布:上面提到组件库构建打包后需要发布到私服或 npm,那难道在组件库开发阶段就频繁的发布到私服上吗?这样做也没问题。不过优雅哥的建议是在本地启动一个迷你私服,当组件库开发到一个阶段(如 beta版本)可以提供给其他项目使用时,便可以按照常规流程发布到公司的私服或 npm 上。
  4. 组件库文档的编写和发布:通常会采用 MarkDown 来编写组件库的操作手册、每个组件的 API(props 组件的输入属性、events 组件提供的事件、methods 组件暴露的方法、slots 组件支持的插槽)、组件的使用说明、Demo 展示、Demo 对应的代码等。组件库文档中的 Demo 不仅给使用者参考,还可以使用它来调试组件。在文档编写完成后,需要将文档构建打包发布到 HTTP 服务上,供开发同事查看。
  5. 组件库开发工具 cli:每次新创建一个组件,都需要创建一套组件目录文件结构、注册该组件、在文档中添加该组件文档、Demo等操作,整个过程繁琐且没价值,而组件库可能会有几十个组件,所以很有必要开发一个 cli 用于快速创建组件,同时实现创建组件的规范化。
  6. 组件库 example 的开发和发布:这个是非必须的,在组件库中添加这个部分是基于两个方面考虑,其一是可以开发一个演示站点,用来展示组件库在项目中的实现效果;其二是在我的实践中,组件的开发通常由业务开发驱动,在开发 example 的过程中逐步完善组件库中的组件,当组件实现到一定的程度后,便可以将 example 抽取到独立的工程中。

2 环境准备

  1. Node JS 和 npm 版本:
node -v
npm -v

各位使用的版本最新大于等于我的版本。我本地的版本如下:

node:8.10.0
npm:7.14.0
  1. 安装或更新 pnpm
npm install -g pnpm

安装后查看版本:

pnpm -v

我本地 pnpm 版本号为 7.14.2

3 搭建 monorepo 项目

monorepo 单一代码库,是一种代码库的组织方式,与之对应的是 multirepos 多代码库。multirepos 通常是将不同的模块(packages)放在不同的代码仓库中,而 monorepo 是一个代码仓库中存放多个 packages。

在咱组件库基础工程项目中,包含了很多个包:多个组件的包、文档对应的包、cli 包、example 包,如果都在不同的代码仓库中维护,那则需要对应多个仓库,开发过程中需要在多个仓库间切换。此外,不同的仓库间的代码相互引用也比较麻烦。所以在组件库基础工程采用 monorepo 的方式来组织多个包。

实现 monorepo 有很多方式,LernaYarn Workspacepnpm Workspace 等,这里我选择 pnpm,使用 pnpm 后你会感觉到它的很多好处:速度、磁盘空间等。

关于 pnpm、monorepo 的理论知识,大家自己上网查询,优雅哥就不写那些无关痛痒的废话来凑数了。

3.1 创建项目

  1. 创建项目根目录

创建一个目录,作为组件库工程的根目录,目录名就使用你定义的组件库的名称,我命名为 yyg-demo-ui。用 IDE 打开该目录。

  1. 初始化 package.json

在命令行中进入该目录,使用 pnpm 初始化 package.json

pnpm init

执行完该命令后,会在项目根目录下自动生成 package.json 文件。在 package.json 文件中指定 type 属性为 module

{
	...
  "type": "module",
  ...
}
  1. git 初始化:
git init
  1. 创建目录

在项目根目录下分别创建 cli、docs、example、packages 四个目录,分别存放命令行工具、组件库文档、example、组件库四大模块,并在 packages 目录下创建 foo 和 yyg-demo-ui (yyg-admin-ui 需修改为你的组件库名)两个目录。

mkdir -p cli docs example packages/foo packages/yyg-demo-ui

目录结构如下:

yyg-demo-ui/
|- cli/
|- docs/
|- example/
|- packages/
		|- foo/
		|- yyg-demo-ui/

3.2 配置 workspace

前面创建了四个目录,需要告诉 pnpm 有哪些包,pnpm 提供了配置文件来配置 monorepo

  1. 在项目根目录下创建配置文件 pnpm-workspace.yaml
packages:
  - packages/*
  - cli
  - docs
  - example
  # exclude packages that are inside test directories
  - '!**/test/**'

上面的配置指定了 clidocsexample 本身是 package,packages 目录下的子目录也是 package。同时排除了所有的 test 目录。

  1. package.json 中指定 workspace
{
	...
  "workspaces": [
    "packages/*",
    "cli",
    "docs",
    "example"
  ]
}

到这一步就完成 pnpm + monorepo 的搭建了,项目根目录称为 workspace-root,下一步将初始化 workspace-root

感谢你阅读本文,如果本文给了你一点点帮助或者启发,还请三连支持一下,点赞、关注、收藏,程序员优雅哥会持续与大家分享更多干货

有关Vue3 企业级优雅实战 - 组件库框架 - 1 搭建 pnpm monorepo的更多相关文章

  1. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明:前端使用微信微信小程序开发工具:后端使用ssm:VU

  2. 微信小程序开发入门与实战(Behaviors使用) - 2

    @作者:SYFStrive @博客首页:HomePage📜:微信小程序📌:个人社区(欢迎大佬们加入)👉:社区链接🔗📌:觉得文章不错可以点点关注👉:专栏连接🔗💃:感谢支持,学累了可以先看小段由小胖给大家带来的街舞👉微信小程序(🔥)目录自定义组件-behaviors    1、什么是behaviors    2、behaviors的工作方式    3、创建behavior    4、导入并使用behavior    5、behavior中所有可用的节点    6、同名字段的覆盖和组合规则总结最后自定义组件-behaviors    1、什么是behaviorsbehaviors是小程序中,用于实现

  3. TimeSformer:抛弃CNN的Transformer视频理解框架 - 2

    Transformers开始在视频识别领域的“猪突猛进”,各种改进和魔改层出不穷。由此作者将开启VideoTransformer系列的讲解,本篇主要介绍了FBAI团队的TimeSformer,这也是第一篇使用纯Transformer结构在视频识别上的文章。如果觉得有用,就请点赞、收藏、关注!paper:https://arxiv.org/abs/2102.05095code(offical):https://github.com/facebookresearch/TimeSformeraccept:ICML2021author:FacebookAI一、前言Transformers(VIT)在图

  4. ruby-on-rails - Rails 优雅地处理超时 session ? - 2

    使用rails4,ruby2。我在rails配置中为我的cookiesession设置了30分钟的超时时间。问题是,如果我转到表单,让session超时,然后提交表单,我会收到此ActionController::InvalidAuthenticityToken错误。如何在Rails中优雅地处理这个错误?比如说,重定向到登录屏幕? 最佳答案 在您的ApplicationController:rescue_fromActionController::InvalidAuthenticityTokendoredirect_tosome_p

  5. ruby - 获取数组中的值并最小化某个类属性的最优雅的方法是什么? - 2

    假设我有以下类(class):classPersondefinitialize(name,age)@name=name@age=ageenddefget_agereturn@ageendend我有一组Person对象。是否有一种简洁的、类似于Ruby的方法来获取最小(或最大)年龄的人?如何根据它对它们进行排序? 最佳答案 这样做会:people_array.min_by(&:get_age)people_array.max_by(&:get_age)people_array.sort_by(&:get_age)

  6. ruby-on-rails - 优雅的 Rails : multiple routes, 相同的 Controller Action - 2

    让多条路线去同一条路的最优雅的方式是什么ControllerAction?我有:get'dashboard',to:'dashboard#index'get'dashboard/pending',to:'dashboard#index'get'dashboard/live',to:'dashboard#index'get'dashboard/sold',to:'dashboard#index'这很丑陋。有什么“更优雅”的建议吗?一个类轮的奖励积分。 最佳答案 为什么不只有一个路由和一个Controller操作,并根据传递给它的参数来

  7. ruby - 鸭子输入字符串、符号和数组的优雅方式? - 2

    这是针对我无法破坏的现有公共(public)API,但我确实希望对其进行扩展。目前,该方法采用字符串或符号或任何其他在作为第一个参数传递给send时有意义的内容我想添加发送字符串、符号等列表的功能。我可以只使用is_a吗?数组,但还有其他发送列表的方法,这不是很像ruby​​。我将调用列表中的map,所以第一个倾向是使用respond_to?:map。但是字符串也会响应:map,所以这行不通。 最佳答案 如何将它们全部视为数组?String的行为与仅包含String的Array相同:deffoo(obj,arg)[*arg].eac

  8. ruby - sinatra 框架的 MVC 模式 - 2

    我想开始使用“Sinatra”框架进行编码,但我找不到该框架的“MVC”模式。是“MVC-Sinatra”模式或框架吗? 最佳答案 您可能想查看Padrino这是一个围绕Sinatra构建的框架,可为您的项目提供更“类似Rails”的感觉,但没有那么多隐藏的魔法。这是使用Sinatra可以做什么的一个很好的例子。虽然如果您需要开始使用这很好,但我个人建议您将它用作学习工具,以对您来说最有意义的方式使用Sinatra构建您自己的应用程序。写一些测试/期望,写一些代码,通过测试-重复:)至于ORM,你还应该结帐Sequel其中(imho

  9. ruby - 优雅的链式 'or' 用于测试 Ruby 中的相同变量 - 2

    怎样说才是明智的呢?if@thing=="01"or"02"or"03"or"04"or"05"(数字包含在数据类型字符串的列中。) 最佳答案 制作数组并使用.include?if["01","02","03","04","05"].include?(@thing)如果值真的都是连续的,你可以使用像(1..5).include?这样的范围对于字符串,你可以使用:if("01".."05").include?(@thing) 关于ruby-优雅的链式'or'用于测试Ruby中的相同变量,我

  10. ruby - Ruby 中优雅的循环 Elsing - 2

    我必须编写一个Ruby方法:遍历数组,如果其中一个元素符合特定条件则执行Foo。如果没有数组元素符合条件,则执行Bar操作。在任何其他语言中,我会在进入循环之前设置一个bool变量,并在执行Foo时切换它。该变量的值会告诉我是否需要Bar。但这感觉不像Rubyish那样不优雅。谁能提出更好的方法?编辑一些非常好的答案,但由于我本应提及的细节,它们不太有效。Foo所做的事情是对符合条件的数组元素完成的。此外,保证最多有一个元素匹配条件。 最佳答案 是否有任何项目匹配?如果是,则做一些不涉及匹配项目的事情。ifitems.any?{|i

随机推荐