如何不使用打包器、直接在浏览器中运行 Excalidraw（import maps + EXCALIDRAW_ASSET_PATH）？

如何不使用打包器、直接在浏览器中运行 Excalidrawimport maps EXCALIDRAW_ASSET_PATH【免费下载链接】excalidrawVirtual whiteboard for sketching hand-drawn like diagrams项目地址: https://gitcode.com/GitHub_Trending/ex/excalidraw如果你的页面是一个纯静态 HTML 项目或者你想临时验证 Excalidraw 的嵌入效果而不想引入 Webpack、Vite 这类打包流程官方文档给出了直接可行的路径用 ES module 脚本从 esm.sh 加载excalidraw/excalidraw配合 import map 统一react、react-dom、react/jsx-runtime的版本并用window.EXCALIDRAW_ASSET_PATH控制字体等静态资源的来源。本文按 integration.mdx 的 Browser 章节、installation.mdx 的字体自托管章节和 packages/excalidraw/README.md 的说明给出完整可照做的页面与验证方式。先理解 import map 在这里的作用文档明确说明We rely on import maps to de-duplicate react, react-dom and react/jsx-runtime versions即靠 import map 去重 react 三个包的版本。库的 ESM 构建通过?externalreact,react-dom参数排除了 react也就是说库内部仍然以裸说明符react、react/jsx-runtime、react-dom发起 import。这些裸说明符在浏览器里默认无法解析import map 负责把它们统一指到同一份 esm.sh 地址避免页面里出现多份 react 实例。因此 import map 不是可选项而是这条无打包器路径的一部分。搭建最小页面文档把示例拆成了 HTML 和 JS 两个 TabHTML Tab 给出head部分样式、EXCALIDRAW_ASSET_PATH、import mapJS Tab 给出入口模块代码。把它们合成一个单文件页面如下版本号excalidraw/excalidraw0.18.0、react19.0.0与文档保持一致如果你要使用其他版本需同步替换库和 import map 中的对应地址。!DOCTYPE html html head titleExcalidraw in browser/title meta charsetUTF-8 / link relstylesheet hrefhttps://esm.sh/excalidraw/excalidraw0.18.0/dist/dev/index.css / script window.EXCALIDRAW_ASSET_PATH https://esm.sh/excalidraw/excalidraw0.18.0/dist/prod/; /script script typeimportmap { imports: { react: https://esm.sh/react19.0.0, react/jsx-runtime: https://esm.sh/react19.0.0/jsx-runtime, react-dom: https://esm.sh/react-dom19.0.0 } } /script /head body div idapp/div script typemodule import * as ExcalidrawLib from https://esm.sh/excalidraw/excalidraw0.18.0/dist/dev/index.js?externalreact,react-dom; import React from https://esm.sh/react19.0.0; import ReactDOM from https://esm.sh/react-dom19.0.0 window.ExcalidrawLib ExcalidrawLib; console.log(Excalidraw library, ExcalidrawLib); const App () { return React.createElement( React.Fragment, null, React.createElement( div, { style: { height: 500px }, }, React.createElement(ExcalidrawLib.Excalidraw), ), ); }; const excalidrawWrapper document.getElementById(app); const root ReactDOM.createRoot(excalidrawWrapper); root.render(React.createElement(App)); /script /body /html几点说明帮助你判断下一步样式表加载的是dist/dev/index.css与文档示例一致样式缺失是画布空白的主要原因之一后面验证时还会提到。文档 HTML Tab 里还有一行link relstylesheet href./index.css /那是示例页面自身的样式文件与 Excalidraw 无关没有对应文件时省略即可。文档 HTML Tab 的 body 里写的是script typetext/javascript srcpackages/excalidraw/index.js/script这是仓库源码布局里的路径独立项目里无法直接访问真正的入口代码以 JS Tab 为准也就是上面script typemodule内的内容。Excalidraw 会占满容器块 100% 的宽高所以容器必须有非零尺寸。示例中用style: { height: 500px }的内层 div 保证画布有高度。window.ExcalidrawLib ExcalidrawLib;把库挂到全局便于在其他脚本里引用文档示例保留了这一行可按需保留。验证是否跑通打开页面后看控制台文档示例代码里会打印Excalidraw library和整个库对象console.log(Excalidraw library, ExcalidrawLib)。能打印出带Excalidraw等导出的对象说明模块加载和 import map 解析都成功了。页面中#app下应出现 500px 高的白板。根据 packages/excalidraw/README.md 给出的排查提示如果画布是空白的先检查两件事——CSS 是否已引入、父容器高度是否为非零。这是文档点名的两个最常见集成失败点。可选分支自托管字体与资源上面示例把EXCALIDRAW_ASSET_PATH指向 esm.sh 的dist/prod/地址。按 installation.mdx 和 README 的说法默认情况下 Excalidraw 会从 CDN文档给出的是https://esm.run/excalidraw/excalidraw/dist/prod下载用到的字体如果你要自托管需要先安装 npm 包以获得字体文件这一步与上面浏览器直用不冲突只是为了拿到node_modules里的字体npm install react react-dom excalidraw/excalidraw # or yarn add react react-dom excalidraw/excalidraw把node_modules/excalidraw/excalidraw/dist/prod/fonts的内容复制到你的静态资源路径例如项目的public/目录。把window.EXCALIDRAW_ASSET_PATH指向同一个路径。放在站点根目录就是window.EXCALIDRAW_ASSET_PATH /;如果资源挂在 CDN 上head script window.EXCALIDRAW_ASSET_PATH https://my.cdn.com/assets/; /script /head文档还给了一个基于location.origin动态设置的 Next.js 写法供参考Script idload-env-variables strategybeforeInteractive { window[EXCALIDRAW_ASSET_PATH] location.origin; } // or use just /! /Script注意 README 中的明确告诫Do not set window.EXCALIDRAW_ASSET_PATH unless you are intentionally self-hosting fonts/assets.——如果你没有自托管意图就不要设置这个变量让字体走默认 CDN。仓库内的参考示例与限制文档引用的完整示例在 examples/with-script-in-browser。它的 index.html 同样通过window.EXCALIDRAW_ASSET_PATH https://esm.sh/excalidraw/excalidraw0.18.0/dist/prod/设置资源地址并通过script typemodule导入excalidraw/excalidraw后挂到window.ExcalidrawLibindex.tsx 再取用window.ExcalidrawLib渲染。这个示例使用 Vite 开发服务器vite.config.mts端口 3001来提供 TS 模块适合对照学习完整用法本文前面的单文件页面则是它的最小化等价物。类型定义位于excalidraw/excalidraw/types文档同样指向上面这个示例作参考。版本以文档为准文档示例固定使用0.18.0库 19.0.0React 的组合升级版本时 esm.sh 的 URL 和 import map 需要一起调整本文不展开版本兼容细节。完成以上步骤后你在浏览器里看到的就是一个与打包器集成方式行为一致的 Excalidraw 白板#app容器内渲染 500px 高画布控制台可查到库对象字体按EXCALIDRAW_ASSET_PATH或默认 CDN加载。后续若要加入initialData、事件回调等集成内容文档中的组件属性说明和examples/with-script-in-browser里的ExampleApp是直接参照对象。【免费下载链接】excalidrawVirtual whiteboard for sketching hand-drawn like diagrams项目地址: https://gitcode.com/GitHub_Trending/ex/excalidraw创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考