Canvas简历编辑器-Monorepo+Rspack工程实践_使用monorepo后报错invalid hook call-CSDN博客

本文链接：https://blog.csdn.net/qq_40413670/article/details/142326757

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简历编辑器项目的相关文章:

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操作，主要用于描述整个编辑器的数据结构以及操