尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

Univer电子表格引擎:从Demo到生产部署的实操路径

Univer电子表格引擎:从Demo到生产部署的实操路径 Univer电子表格引擎从Demo到生产部署的实操路径【免费下载链接】univerUniver is a full-stack framework for creating and editing spreadsheets / word processor / presentation on both web and server.项目地址: https://gitcode.com/GitHub_Trending/un/univerUniver 是一套在浏览器和 Node.js 上都能跑的文档与数据编辑框架电子表格是其中最完整的模块模型、渲染、公式引擎全部内置文档Docs和幻灯片Slides也在同一套架构上。它不是 SaaS 产品而是可以嵌进你自己后端的编辑器引擎协作同步协议留给了业务侧实现。 梳理核心能力模块模块提供什么入口位置电子表格工作表模型、命令系统、公式引擎packages/sheets/、packages/engine-formula/文档 / 幻灯片字处理和演示文稿编辑器packages/docs/、packages/slides/Presets把模型UI样式多语言打包成一行引入的组合包presets/RPC服务端无头运行同一套 API 在 Node 侧执行packages/rpc-node/能力边界看清楚了接下来让页面跑起来。 跑通本地预览git clone https://gitcode.com/GitHub_Trending/un/univer cd univer pnpm install pnpm devpnpm dev用 esbuild 的 watch 模式起一个本地静态服务默认端口从 3002 起被占用会自动递增终端会打印实际地址。环境要求是 Node 22.18、pnpm 11版本安装细节见 CONTRIBUTING.md这里不展开。demo 是交互式选择入口的终端里按提示勾选 sheets 相关条目即可改代码后页面热重载。 看懂代码组织页面能跑之后看看底下是什么结构。仓库只展开两层就够用了. ├── common/ 共享构建配置与工具 ├── examples/ Web 演示入口含多实例、worker 等用法 ├── packages/ 核心包与全部功能插件 └── presets/ 生产环境推荐的一行接入组合包决定什么能力在哪里的关键目录packages/core/文档模型、命令系统、Facade API所有功能的地基packages/engine-render/ 与 packages/engine-formula/Canvas 渲染引擎和公式引擎两个最重的部分功能包一律成对出现sheets-filter是纯逻辑sheets-filter-ui是交互界面想裁功能时按这对拆examples/src/sheets-multi/同页面多实例的参考实现结构摸清了就可以构建并上线。 部署构建产物静态托管这条路径最短pnpm build:demo把 demo 打成静态文件放进examples/local/本地用pnpm serve:e2e先预览一遍确认无误再把目录丢给 Nginx。注意 examples/local/ 是 demo 产物正式产品应该用 presets 自己打包但部署方式完全一致server { listen 80; server_name sheet.example.com; root /var/www/univer; index index.html; location / { try_files $uri $uri/ /index.html; } gzip on; gzip_types text/css application/javascript application/json; }需要容器化时把构建和托管拆成两个 stageFROM node:22 AS build WORKDIR /app COPY . . RUN npm i -g pnpm pnpm install pnpm build:demo FROM nginx:alpine COPY --frombuild /app/examples/local /usr/share/nginx/html COPY nginx.conf /etc/nginx/conf.d/default.conf如果要在一个页面里并排放多个工作簿实例examples/src/sheets-multi/ 里就是现成写法上线只是开始这几个坑踩得最多。 排查高频坑内存泄漏用pnpm dev:e2e起调试页在控制台跑E2EControllerAPI.loadAndRelease()和E2EControllerAPI.disposeUniver()复现再打堆快照看Workbook实例是否被保留。高频原因就三类订阅没释放、单例模块里持有当前 unit、往useEffect依赖数组里塞大对象。完整排查清单在 docs/FIX_MEMORY_LEAK.md。构建产物路径找错demo 的产物在examples/local/不是常见的dist。pnpm serve:e2e只是把该目录起个静态服务Nginx 的root指向同一个目录即可部署后刷新 404九成是路径对不上而不是路由问题。包版本不一致所有univerjs/*包必须保持同一版本混版本会出现组件缺失这类不好定位的运行时错误。改动后建议pnpm test跑一遍 vitest 单测兜底最适合 Univer 的场景是自建在线电子表格协作产品或者需要同一份表格数据在浏览器编辑、在服务端做导出和校验。从 examples/src/main.tsx 的入口组装方式和 packages/core/ 的 Facade API 入手半天就能搭出第一版可运行的 Univer 电子表格。【免费下载链接】univerUniver is a full-stack framework for creating and editing spreadsheets / word processor / presentation on both web and server.项目地址: https://gitcode.com/GitHub_Trending/un/univer创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表