Canvas简历编辑器-Monorepo+Rspack工程实践
Canvas简历编辑器-Monorepo+Rspack工程实践
在之前我们围绕Canvas
聊了很多代码设计层面的东西,在这里我们聊一下工程实践。在之前的文中我也提到过,因为是本着学习的态度以及对技术的好奇心来做的,所以除了一些工具类的库例如 ArcoDesign
、ResizeObserve
、Jest
等包之外,关于 数据结构packages/delta
、插件化packages/plugin
、核心引擎packages/core
等都是手动实现的,所以在这里除了学习了Canvas
之外,实际上还做了一些项目工程化的实践。
- 在线编辑: https://windrunnermax.github.io/CanvasEditor
- 开源地址: https://github.com/WindrunnerMax/CanvasEditor
关于Canvas
简历编辑器项目的相关文章:
- 掘金老给我推Canvas,我也学习Canvas做了个简历编辑器
- Canvas图形编辑器-数据结构与History(undo/redo)
- Canvas图形编辑器-我的剪贴板里究竟有什么数据
- Canvas简历编辑器-图形绘制与状态管理(轻量级DOM)
- Canvas简历编辑器-Monorepo+Rspack工程实践
- Canvas简历编辑器-层级渲染与事件管理能力设计
- Canvas简历编辑器-选中绘制与拖拽多选交互方案
Pnpm+Monorepo
我们先来聊聊为什么要用monorepo
,先举一个我之前踩过的坑作为例子,在之前我的富文本编辑器项目 DocEditor 就是完全写在了独立的单个src
目录中,在项目本身的运行过程中是没什么问题的,但是当时我想将编辑器独立出来作为NPM
包用,打包的过程是借助了Rollup
也没什么问题,问题就出在了引用方上。当时我在简历编辑器中引入文档编辑器的NPM
包时,发现有一个模块被错误的TreeShaking
了,现在都还能在编辑器中看到这部分兼容。
module: {rules: [{// 对`doc-editor-light`的`TreeShaking`有点问题test: /doc-editor-light\/dist\/tslib.*\.js/,sideEffects: true,},]
}
这个问题导致了我在dev
模式下没有什么问题,但是在build
之后这部分代码被错误地移除掉了,导致编辑器的wrapper
节点出现了问题,列表等元素不能正确添加。当然实际上这不能说明独立包项目不好,只能说整个管理的时候可能并不是那么简单,尤其是打包为NPM
包的时候需要注意各个入口问题。那么现在引用我的富文本编辑器包已经变成了4
个独立的包分别引用,各司其职,就没再出现过这个问题。
说起来打包的问题,我还踩过一个坑,不知道大家是不是见到过React
的Invalid hook call
这个经典报错。之前我将其独立拆包的时候之后,发现会报这个错,但是我在package.json
中是标注的peerDependencies "react": ">=16"
,按理说这里会直接应用安装该包的React
,不可能出现版本不一致的问题,至于Rules of Hooks
肯定也不可能,因为我之前是好好的,拆完包才出的问题。最后发现是我在rollup
中没把peerDependencies
这部分解析,导致jsx-runtime
被打进了包里,虽然React
的版本都是17.0.2
但是实际上是运行了两个独立词法作用域的React Hooks
,这才导致了这个问题。
Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app See for tips about how to debug and fix this problem.
接着回到项目本身,当前项目已经抽离出来独立的RspackMonoTemplate,平时开发也会基于这个模版创建仓库。当前简历编辑器项目的结构tree -L 2 -I node_modules --dirsfirst
如下:
CanvasEditor
│── packages
│ ├── core
│ ├── delta
│ ├── plugin
│ ├── react
│ └── utils
├── package.json
├── pnpm-lock.yaml
├── pnpm-workspace.yaml
└── tsconfig.json
packages/core
: 编辑器核心引擎模块,对于 剪贴板操作、事件管理、状态管理、History
模块、Canvas
操作、选区操作 等等都封装在这里,相当于实现了基本的Canvas
引擎能力。packages/delta
: 数据结构模块,设计了基准数据结构,实现了DeltaSet
数据结构以及原子化的Op
操作,主要用于描述整个编辑器的数据结构以及操作,实现了invert
等能力,对于实现History
模块有很大的意义。packages/plugin
: 插件模块,在packages/delta
的基础上设计了插件化的能力,主要为了实现编辑器的功能模块化,例如Text
、Image
、Rect
等插件都是在这里实现的。packages/react
:React
模块,主要是为了通过实现编辑器的视图层,在这里有比较重要的一点,我们的核心模块是视图框架无关的,如果有必要的话同样可以使用Vue
、Angular
等框架来实现视图层。packages/utils
: 工具模块,主要是一些工具函数的封装,例如FixedNumber
、Palette
等等,这些工具函数在整个编辑器中都有使用,是作为基础包在整个workspace
中引用的。package.json
: 整个workspace
的package.json
,在这里配置了一些项目的信息,EsLint
、StyleLint
相关的配置也都在这里实现。pnpm-lock.yaml
:pnpm
的锁文件,用于锁定整个workspace
的依赖版本。pnpm-workspace.yaml
:pnpm
的workspace
配置文件,用于配置monorepo
的能力。tsconfig.json
: 整个workspace
的tsconfig
配置文件,用于配置整个workspace
的TypeScript
编译配置,在这里是作为基准配置以提供给项目中的模块引用。
pnpm
自身是非常优秀的包管理器,通过硬链接和符号链接来节省磁盘空间,每个版本的包只需要存储一次,最重要的是pnpm
创建了一个非扁平化的node_modules
结构,从而确保依赖与声明严格匹配,严格控制了依赖提升,能够避免依赖升级的意外问题,这提高了项目的一致性和可预测性。
而说回到monorepo
,pnpm
不光是非常优秀的包管理器,其还提供了一个开箱即用的monorepo
能力。在pnpm
中存在一个pnpm-workspace.yaml
文件,这个文件是用来配置workspack
的,而pnpm
的workspace
就可以作为monorepo
的能力,而我们的配置也非常简单,我们认为在packages
目录下的所有目录都作为子项目。
packages:- 'packages/*'
通过monorepo
我们可以很方便的管理所有子项目,特别是对于需要发Npm
包的项目,将子模块拆分是个不错的选择,特别如果能够做到视图层框架无关的话就显得更加有意义。此外,monorepo
对于整个项目的管理也有很多益处,例如在打包整个应用的时候,我们不需要对每个子项目发新的包之后才能打包,而是可以直接将编译过程放在workspace
层面,这样就可以保证整个项目的一致性,简化了构建过程和持续集成流程,让所有项目可以共享构建脚本和工具配置。此外所有项目和模块共用同一个版本控制系统,便于进行统一的版本管理和变更跟踪,而且还有助于同步更新这些项目间的依赖关系。
TS+Rspack最佳实践
说了这么多使用pnpm + monorepo
管理项目带来的好处,我们再来聊聊我对TS
与Rspack
应用于Monorepo
的最佳实践,不知道大家是不是遇到过这样的两个问题:
- 子项目的
TS
声明更改后不能实时生效,必须要编译一次子项目才可以,而子项目编译的过程中如果将dist
等产物包删除,那么在vsc
或者其他编辑器中就会报TS
找不到引用声明的错误,这个时候就必须要用命令重新Reload TypeScript Project
来去掉报错。而如果不将产物包删除的话,就会出现一些隐性的问题,例如原来某个文件命名为a.tsx
,此时因为一些原因需要将其移动到同名的a
目录并且重新命名为index.tsx
,那么执行了这一顿操作之后,发现如果更改此时的index.tsx
代码不会更新,必须要重启应用的webpack
等编译器才行,因为其还是引用了原来的文件,产生类似的问题虽然不复杂但是排查起来还是需要时间的。 - 更改子项目的
TS
代码必须要重新编译子项目,因为项目是monorepo
管理的,在package.json
中会有workspace
引用,而workspace
实际上是在node_modules
被引用的,所以虽然是子项目但是仍然需要遵循node_modules
的规则才可以,那么其通常需要被编译为js
才可以被执行,所以每次修改代码都必须要全量执行一遍很是麻烦,当然通常我们可以通过-w
命令来观察变动,但是毕竟多了一道步骤,且如果是存在alias
的项目可能仅仅使用tsc
来编译还不够。此外在monorepo
中我们通常会有很多子项目,如果每个子项目都需要这样的话,特别在这种编译时全量编译而不是增量编译的情况下,那么整个项目的编译时间就会变得非常长。
那么在这里我们先来看第一个问题,子项目的TS
声明更改后不能实时生效,因为我们也提到了monorepo
子项目实际上是通过node_modules
来管理和引用的,所以其在默认情况下依然需要遵循node_modules
的规则,即packages.json
的types
字段指向的TS
声明文件,那么我们有没有什么办法可以修改这个行为呢,当然是有的,我们在整个项目的根tsconfig.json
配置path
就可以完美解决这个问题。当我们配置好如下的内容之后,通过按住Ctrl
加鼠标左键点击的时候,就可以跳转到子项目的根目录声明了。此外这里有个要关注的点是,在项目中不建议配置"baseUrl": "."
,在这里会有一些奇奇怪怪的路径引用问题,所以在简历编辑器项目中除了要打包Npm
的tsconfig.build.json
之外,都是直接使用相对路径配置的。
{"compilerOptions": {"...": "...","paths": {"sketching-core": ["./packages/core/src"],"sketching-delta": ["./packages/delta/src"],"sketching-plugin": ["./packages/plugin/src"],"sketching-utils": ["./packages/utils/src"],},},"include": ["packages/*/src"]
}
那么解决了项目的TS
声明问题之后,我们再来看编译的问题,这里的问题看起来会复杂一些,因为TS
声明就单纯只是类型声明而已,不会影响到项目本身代码的编译,编译类型检查除外。那么在Rspack
中应该配置才能让我们的代码直接指向子项目,而不是必须要走node_modules
这套规则,实际上这里也很简单,只需要配置resolve.alias
就可以了,这样当我们直接修改TS
代码时,也能让编辑器立即响应增量编译。
{
// ....resolve: {alias: {"@": path.resolve(__dirname, "./src"),"sketching-core": path.resolve(__dirname, "../core/src"),"sketching-delta": path.resolve(__dirname, "../delta/src"),"sketching-plugin": path.resolve(__dirname, "../plugin/src"),"sketching-utils": path.resolve(__dirname, "../utils/src"),},},
// ....
}
实际上对于Rspack
而言其帮我们做了很多事,比如即使是node_modules
的TS
文件也会编译,而对于一些通过CRA
创建的webpack
项目来说,这个配置就麻烦一些,当然我们同样也可以借助customize-cra
来完成这件事,此外我们还要关闭一些类似于ModuleScopePlugin
的插件才可以,下面是富文本编辑器项目 DocEditor 的配置。
const src = path.resolve(__dirname, "src");
const index = path.resolve(__dirname, "src/index.tsx");
const core = path.resolve(__dirname, "../core/src");
const delta = path.resolve(__dirname, "../delta/src");
const plugin = path.resolve(__dirname, "../plugin/src");
const utils = path.resolve(__dirname, "../utils/src");module.exports = {paths: function (paths) {paths.appSrc = src;paths.appIndexJs = index;return paths;},webpack: override(...[// ...addWebpackResolve({alias: {"doc-editor-core": core,"doc-editor-delta": delta,"doc-editor-plugin": plugin,"doc-editor-utils": utils,},}),babelInclude([src, core, delta, plugin, utils]),// ...configWebpackPlugins(),].filter(Boolean)),
};
此外,简历编辑器是纯前端的项目,这样的项目有个很大的优势是可以直接使用静态资源就可以运行,而如果我们借助GitHub Action
就可以通过Git Pages
在仓库中直接部署,并且可以直接通过GitHub Pages
访问,这样在仓库中就能呈现一个完整的DEMO
。
// .github/workflows/deploy.yml
name: deploy gh-pageson:push:branches:- masterjobs:build-and-deploy:runs-on: ubuntu-lateststeps:- name: checkoutuses: actions/checkout@v2with:fetch-depth: 0persist-credentials: false- name: install node-v16uses: actions/setup-node@v3with:node-version: '16.16.0'- name: install dependenciesrun: |node -vnpm install -g pnpmpnpm config set registry https://registry.npmjs.org/pnpm install --registry=https://registry.npmjs.org/- name: build projectrun: |npm run build:react- name: deploy projectuses: JamesIves/github-pages-deploy-action@releases/v3with:GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}BRANCH: gh-pagesFOLDER: packages/react/build
最后
在这里我们聊了为什么要用Monorepo
以及简单聊了一下pnpm workspace
的优势,然后解决了在子项目开发中会遇到的TS
编译、项目编译的两个实际问题,分别在Monorepo
、Rspack
、Webpack
项目中相关的部分实践了一下,最后还简单聊了一下利用GitHub Action
直接在Git Pages
部署在线DEMO
。那么再往后边的文章中,我们就需要聊一聊如何实现 层级渲染与事件管理 的能力设计。
相关文章:
Canvas简历编辑器-Monorepo+Rspack工程实践
Canvas简历编辑器-MonorepoRspack工程实践 在之前我们围绕Canvas聊了很多代码设计层面的东西,在这里我们聊一下工程实践。在之前的文中我也提到过,因为是本着学习的态度以及对技术的好奇心来做的,所以除了一些工具类的库例如 ArcoDesign、Re…...

uni-app - - - - -vue3使用i18n配置国际化语言
uni-app - - - - -使用i18n配置国际化语言 1. 安装vue-i18n2. 配置文件2.1 创建如下文件2.2 文件配置2.3 main文件导入i18n 3. 页面内使用3.1 template内直接使用3.2 变量接收使用 1. 安装vue-i18n npm install vue-i18n --save2. 配置文件 2.1 创建如下文件 locales文件夹里…...

VSCode好用的插件推荐
1. Chinese 将vscode翻译成简体中文 如果安装了依然是英文,请参考如下方法: ctrlshfitp 2. ESLint 自动检查规范 3. Prettier - Code formatter 可以自动调整代码的缩进、换行和空格,确保代码风格统一。通过配置,Prettier可…...

Linux:八种重定向详解(万字长文警告)
相关阅读Linuxhttps://blog.csdn.net/weixin_45791458/category_12234591.html?spm1001.2014.3001.5482 本文将讨论Linux中的重定向相关问题,在阅读本文前,强烈建议先学习文件描述符的相关内容Linux:文件描述符详解。 重定向分为两类&#x…...

set和map系列容器
前言 学习完二叉搜索树本来是应该直接深化,讲平衡二叉搜索树的。但是在学习它的底层逻辑之前呢,我们先来学学它的应用场面。 set和map的底层不是平衡二叉搜索树而是红黑树,实际上的难度比平衡搜索二叉树大。所以它的底层逻辑会比平衡二叉树更…...

企业告警智策助手 | OPENAIGC开发者大赛企业组AI创作力奖
在第二届拯救者杯OPENAIGC开发者大赛中,涌现出一批技术突出、创意卓越的作品。为了让这些优秀项目被更多人看到,我们特意开设了优秀作品报道专栏,旨在展示其独特之处和开发者的精彩故事。 无论您是技术专家还是爱好者,希望能带给…...
函数组件、Hooks和类组件区别
1. 函数组件(Function Components) 函数组件是接收props并返回React元素的纯JavaScript函数。它们不能拥有自己的状态(state)或生命周期方法,但在React 16.8中引入Hooks之后,这种情况发生了变化。 特点&a…...
在线点餐新体验:Spring Boot 点餐系统
摘 要 随着科学技术的飞速发展,各行各业都在努力与现代先进技术接轨,通过科技手段提高自身的优势;对于网上点餐系统当然也不能排除在外,随着网络技术的不断成熟,带动了网上点餐系统,它彻底改变了过去传统的…...
WPF中Viewbox的介绍和用法
在 WPF(Windows Presentation Foundation) 中,Viewbox 是一个非常有用的容器控件,主要用于根据其自身大小自动调整子元素的缩放比例,以保持其内容的显示效果。无论窗口如何调整大小,Viewbox 内的内容都会按…...

QMT如何获取股票基本信息?如上市时间、退市时间、代码、名称、是否是ST等。QMT量化软件支持!
获取股票概况 包含股票的上市时间、退市时间、代码、名称、是否是ST等。 #获取合约基础信息数据 该信息每交易日9点更新 #内置Python 提示 旧版本客户端中,函数名为ContextInfo.get_instrumentdetail 调用方法 内置python ContextInfo.get_instrument_detai…...
2024年中国科技核心期刊目录(科普卷)
2024年中国科技核心期刊目录 (科普卷) 序号 期刊名称 1 爱上机器人 2 百科知识 3 保健医…...
[解决]navicat连接mysql成功,但是使用jdbc连接不上
在连接数据库时,最初使用的 JDBC URL 配置如下: jdbc:mysql://192.168.56.100:3306/mzxLiving_manage?useUnicodetrue&characterEncodingUTF-8&serverTimezoneAsia/Shanghai修改之后的JDBC URL为 jdbc:mysql://192.168.56.100:3306/mzxLiving…...

sar信号RD域的距离向傅里叶变换
下面可知,举例傅里叶变换时,posp 距离时间和频率 t不等于ft/K。而方位时间和频率时这种线性关系...

4 html5 web components原生组件详细教程
web components 前面我们已经介绍过,这一期我们就来讲一讲具体用法和这其中的关键只是点: 1 基本使用 如果我们想实现一个封装的原生组件,那就离不开使用js去封装,这里主要就是基于HTMLElement这个类,去创建创建一个…...

nginx+keepalived健康检查案例详解(解决nginx出现故障却不能快速切换到备份服务器的问题)
文章目录 简介配置过程前置环境请看创建健康检查脚本结果测试 简介 在我们通过nginxkeepalived实现高可用后,会发现nginx出现故障的时候keepalived并不会将虚拟ip切换到备份服务器上其原理就是nginx和keepalived是两个独立的服务,Nginx的故障状态不会触…...
什么是AI大模型?
什么是AI大模型? 人工智能(AI)大模型近年来在各个领域掀起了一场技术革命,从语言生成到图像识别,再到自动驾驶和医疗诊断,AI大模型的应用场景越来越广泛。这些模型的表现令人惊叹,但它们的工作原理和背后技…...
建造者模式__c#
目录 调用 指挥者 抽象建造者 建造者 定义具体产品 调用 用指挥者指挥建造者建造产品 在指挥者这里组装成产品 namespace _建造者模式 {internal class Program{static void Main(string[] args){Builder buildernew JiangHuaiBuilder();//建造者Director director new…...

学习MRI处理过程中搜到的宝藏网站
今天浏览网页查到了一些宝藏网站,正好记录一下,后面搜到好东东再接着填充,方便查阅~ (1)牛人网站 这个网站是在搜集seed关键词时发现的,用pdf文档记录,可下载查阅,条理清晰…...
【C语言】const char*强制类型转换 (type cast)的告警问题
void run_upload(const char *ftp_url) {CircularQueue queue;// 初始化环形队列for (int i = 0; i < QUEUE_SIZE; i++) {queue.items[i].data = malloc(BUFFER_SIZE);if (queue.items[i].data == NULL) {fprintf(stderr, "Failed to allocate memory for queue item %…...

python-比较月亮大小/数组下标/人见人爱a+b
一:比较月亮大小 题目描述 小理是一名出色的狼人。众所周知,狼人只有在满月之夜才会变成狼。 同时,月亮的大小随着时间变化,它的大小变化 3030 天为一循环。 它的变化情况(从第一天开始)为 0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,14,13,12,1…...
SkyWalking 10.2.0 SWCK 配置过程
SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外,K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案,全安装在K8S群集中。 具体可参…...

STM32F4基本定时器使用和原理详解
STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...

AI,如何重构理解、匹配与决策?
AI 时代,我们如何理解消费? 作者|王彬 封面|Unplash 人们通过信息理解世界。 曾几何时,PC 与移动互联网重塑了人们的购物路径:信息变得唾手可得,商品决策变得高度依赖内容。 但 AI 时代的来…...

以光量子为例,详解量子获取方式
光量子技术获取量子比特可在室温下进行。该方式有望通过与名为硅光子学(silicon photonics)的光波导(optical waveguide)芯片制造技术和光纤等光通信技术相结合来实现量子计算机。量子力学中,光既是波又是粒子。光子本…...

Python基于历史模拟方法实现投资组合风险管理的VaR与ES模型项目实战
说明:这是一个机器学习实战项目(附带数据代码文档),如需数据代码文档可以直接到文章最后关注获取。 1.项目背景 在金融市场日益复杂和波动加剧的背景下,风险管理成为金融机构和个人投资者关注的核心议题之一。VaR&…...
uniapp 字符包含的相关方法
在uniapp中,如果你想检查一个字符串是否包含另一个子字符串,你可以使用JavaScript中的includes()方法或者indexOf()方法。这两种方法都可以达到目的,但它们在处理方式和返回值上有所不同。 使用includes()方法 includes()方法用于判断一个字…...
k8s从入门到放弃之HPA控制器
k8s从入门到放弃之HPA控制器 Kubernetes中的Horizontal Pod Autoscaler (HPA)控制器是一种用于自动扩展部署、副本集或复制控制器中Pod数量的机制。它可以根据观察到的CPU利用率(或其他自定义指标)来调整这些对象的规模,从而帮助应用程序在负…...

相关类相关的可视化图像总结
目录 一、散点图 二、气泡图 三、相关图 四、热力图 五、二维密度图 六、多模态二维密度图 七、雷达图 八、桑基图 九、总结 一、散点图 特点 通过点的位置展示两个连续变量之间的关系,可直观判断线性相关、非线性相关或无相关关系,点的分布密…...

Java数组Arrays操作全攻略
Arrays类的概述 Java中的Arrays类位于java.util包中,提供了一系列静态方法用于操作数组(如排序、搜索、填充、比较等)。这些方法适用于基本类型数组和对象数组。 常用成员方法及代码示例 排序(sort) 对数组进行升序…...

Axure零基础跟我学:展开与收回
亲爱的小伙伴,如有帮助请订阅专栏!跟着老师每课一练,系统学习Axure交互设计课程! Axure产品经理精品视频课https://edu.csdn.net/course/detail/40420 课程主题:Axure菜单展开与收回 课程视频:...