首页 星云 工具 资源 星选 资讯 热门工具
:

PDF转图片 完全免费 小红书视频下载 无水印 抖音视频下载 无水印 数字星空

Canvas简历编辑器-Monorepo+Rspack工程实践

编程知识
2024年09月18日 09:43

Canvas简历编辑器-Monorepo+Rspack工程实践

在之前我们围绕Canvas聊了很多代码设计层面的东西,在这里我们聊一下工程实践。在之前的文中我也提到过,因为是本着学习的态度以及对技术的好奇心来做的,所以除了一些工具类的库例如 ArcoDesignResizeObserveJest 等包之外,关于 数据结构packages/delta、插件化packages/plugin、核心引擎packages/core 等都是手动实现的,所以在这里除了学习了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个独立的包分别引用,各司其职,就没再出现过这个问题。

说起来打包的问题,我还踩过一个坑,不知道大家是不是见到过ReactInvalid 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的基础上设计了插件化的能力,主要为了实现编辑器的功能模块化,例如TextImageRect等插件都是在这里实现的。
  • packages/react: React模块,主要是为了通过实现编辑器的视图层,在这里有比较重要的一点,我们的核心模块是视图框架无关的,如果有必要的话同样可以使用VueAngular等框架来实现视图层。
  • packages/utils: 工具模块,主要是一些工具函数的封装,例如FixedNumberPalette等等,这些工具函数在整个编辑器中都有使用,是作为基础包在整个workspace中引用的。
  • package.json: 整个workspacepackage.json,在这里配置了一些项目的信息,EsLintStyleLint相关的配置也都在这里实现。
  • pnpm-lock.yaml: pnpm的锁文件,用于锁定整个workspace的依赖版本。
  • pnpm-workspace.yaml: pnpmworkspace配置文件,用于配置monorepo的能力。
  • tsconfig.json: 整个workspacetsconfig配置文件,用于配置整个workspaceTypeScript编译配置,在这里是作为基准配置以提供给项目中的模块引用。

pnpm自身是非常优秀的包管理器,通过硬链接和符号链接来节省磁盘空间,每个版本的包只需要存储一次,最重要的是pnpm创建了一个非扁平化的node_modules结构,从而确保依赖与声明严格匹配,严格控制了依赖提升,能够避免依赖升级的意外问题,这提高了项目的一致性和可预测性。

而说回到monorepopnpm不光是非常优秀的包管理器,其还提供了一个开箱即用的monorepo能力。在pnpm中存在一个pnpm-workspace.yaml文件,这个文件是用来配置workspack的,而pnpmworkspace就可以作为monorepo的能力,而我们的配置也非常简单,我们认为在packages目录下的所有目录都作为子项目。

packages:
  - 'packages/*'

通过monorepo我们可以很方便的管理所有子项目,特别是对于需要发Npm包的项目,将子模块拆分是个不错的选择,特别如果能够做到视图层框架无关的话就显得更加有意义。此外,monorepo对于整个项目的管理也有很多益处,例如在打包整个应用的时候,我们不需要对每个子项目发新的包之后才能打包,而是可以直接将编译过程放在workspace层面,这样就可以保证整个项目的一致性,简化了构建过程和持续集成流程,让所有项目可以共享构建脚本和工具配置。此外所有项目和模块共用同一个版本控制系统,便于进行统一的版本管理和变更跟踪,而且还有助于同步更新这些项目间的依赖关系。

TS+Rspack最佳实践

说了这么多使用pnpm + monorepo管理项目带来的好处,我们再来聊聊我对TSRspack应用于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.jsontypes字段指向的TS声明文件,那么我们有没有什么办法可以修改这个行为呢,当然是有的,我们在整个项目的根tsconfig.json配置path就可以完美解决这个问题。当我们配置好如下的内容之后,通过按住Ctrl加鼠标左键点击的时候,就可以跳转到子项目的根目录声明了。此外这里有个要关注的点是,在项目中不建议配置"baseUrl": ".",在这里会有一些奇奇怪怪的路径引用问题,所以在简历编辑器项目中除了要打包Npmtsconfig.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_modulesTS文件也会编译,而对于一些通过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-pages

on:
  push:
    branches:
      - master

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: checkout
        uses: actions/checkout@v2
        with:
          fetch-depth: 0
          persist-credentials: false
          
      - name: install node-v16
        uses: actions/setup-node@v3
        with:
          node-version: '16.16.0'

      - name: install dependencies
        run: |
          node -v
          npm install -g pnpm
          pnpm config set registry https://registry.npmjs.org/
          pnpm install --registry=https://registry.npmjs.org/

      - name: build project
        run: |
          npm run build:react

      - name: deploy project
        uses: JamesIves/github-pages-deploy-action@releases/v3
        with:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          BRANCH: gh-pages
          FOLDER: packages/react/build

最后

在这里我们聊了为什么要用Monorepo以及简单聊了一下pnpm workspace的优势,然后解决了在子项目开发中会遇到的TS编译、项目编译的两个实际问题,分别在MonorepoRspackWebpack项目中相关的部分实践了一下,最后还简单聊了一下利用GitHub Action直接在Git Pages部署在线DEMO。那么再往后边的文章中,我们就需要聊一聊如何实现 层级渲染与事件管理 的能力设计。

From:https://www.cnblogs.com/WindrunnerMax/p/18418064
本文地址: http://www.shuzixingkong.net/article/2100
0评论
提交 加载更多评论
其他文章 .NET 开源工业级移动端仓库管理系统
前言 在工业生产中,定制化的软件对于每个环节都至关重要。对于仓库管理,推荐一款开源的仓库管理系统(WMS)解决方案。 这款基于.NET 框架开发的移动应用,提供了全面的仓库操作、订单处理、主数据管理、数据分析及个人信息设置等功能,是工业仓库管理的有利助手。 项目介绍 SmoWMS 是一款基于.NET
.NET 开源工业级移动端仓库管理系统 .NET 开源工业级移动端仓库管理系统 .NET 开源工业级移动端仓库管理系统
使用 Wake Lock API:保持设备唤醒的最佳实践
在现代 Web 应用中,尤其是涉及视频播放、实时通信、地图导航等长时间运行的任务时,用户常常希望设备不要因为空闲而自动进入睡眠模式或屏幕变暗。为了解决这一问题,Web API 提供了一个名为 Wake Lock 的接口,允许开发者请求设备保持唤醒状态。 本文将详细介绍如何使用 Wake Lock A
Vue3.5中解构props,让父子组件通信更加丝滑
前言 在Vue3.5版本中响应式 Props 解构终于正式转正了,这个功能之前一直是试验性的。这篇文章来带你搞清楚,一个String类型的props经过解构后明明应该是一个常量了,为什么还没丢失响应式呢?本文中使用的Vue版本为欧阳写文章时的最新版Vue3.5.5 关注公众号:【前端欧阳】,给自己一
Vue3.5中解构props,让父子组件通信更加丝滑 Vue3.5中解构props,让父子组件通信更加丝滑 Vue3.5中解构props,让父子组件通信更加丝滑
揭秘最为知名的黑客工具之一: Netcat!适用安全测试、渗透测试、黑客攻击!
在网络安全领域,黑客工具一直备受关注。它们既可以被用于攻击,也可以用于防御。本文将为大家揭秘一款知名的黑客工具: Netcat。 1、Netcat是什么? Netcat被誉为“网络的瑞士军刀”,简称为 nc,是一个功能丰富的网络工具。最早是一个简单的TCP/IP工具,用于在网络上传输数据。随着时间的
.net core8 使用JWT鉴权(附当前源码)
说明 该文章是属于OverallAuth2.0系列文章,每周更新一篇该系列文章(从0到1完成系统开发)。 该系统文章,我会尽量说的非常详细,做到不管新手、老手都能看懂。 说明:OverallAuth2.0 是一个简单、易懂、功能强大的权限+可视化流程管理系统。 结合上一篇文章使用,味道更佳:.net
.net core8 使用JWT鉴权(附当前源码) .net core8 使用JWT鉴权(附当前源码) .net core8 使用JWT鉴权(附当前源码)
一文带你精通二项式反演!不服来看!
前言 原题:《二项式反演学习笔记》。 这里有我关于二项式反演的一些思考和领会,包含理论推导和在信息学竞赛中的应用。网络上的教程都太潦草了,难以深入理解。因此,这里将以详细的证明为主,介绍二项式反演在 OI 中的使用。 如果你只想快速浏览结论,可以点击这里查看结论。 概述 反演是一种将两个函数 \(f
一文带你精通二项式反演!不服来看!
SSD-KD:天翼云&清华出品,最新无原始数据的蒸馏研究 | CVPR'24
无数据知识蒸馏能够利用大型教师网络所学到的知识,来增强较小型学生网络的训练,而无需访问原始训练数据,从而避免在实际应用中的隐私、安全和专有风险。在这方面的研究中,现有的方法通常遵循一种反演蒸馏的范式,在预训练教师网络指导下实时训练生成对抗网络来合成一个大规模的样本集用于知识蒸馏。论文重新审视了这种常
SSD-KD:天翼云&清华出品,最新无原始数据的蒸馏研究 | CVPR'24 SSD-KD:天翼云&清华出品,最新无原始数据的蒸馏研究 | CVPR'24 SSD-KD:天翼云&清华出品,最新无原始数据的蒸馏研究 | CVPR'24
免弹窗、预授权,默认界面扫码能力打造系统级扫码体验
二维码如今是移动应用流量入口以及功能实现的重要工具,也是各App的流量入口,使用场景愈加丰富,广泛应用于支付、出行、餐饮、生活服务、智慧生活、零售及广告营销等主流场景。 然而,在实际生活中,扫码环境如光照强度、扫码角度、距离等,相机功能如缩放、对焦、曝光等和码图本身完整程度、弯曲程度等很大程度上会影
免弹窗、预授权,默认界面扫码能力打造系统级扫码体验 免弹窗、预授权,默认界面扫码能力打造系统级扫码体验 免弹窗、预授权,默认界面扫码能力打造系统级扫码体验