如何不使用打包器、直接在瀏覽器中運行 Excalidrawimport maps EXCALIDRAW_ASSET_PATH【免費下載鏈接】excalidrawVirtual whiteboard for sketching hand-drawn like diagrams項目地址: https://gitcode.com/GitHub_Trending/ex/excalidraw如果你的頁面是一個純靜態(tài) HTML 項目或者你想臨時驗證 Excalidraw 的嵌入效果而不想引入 Webpack、Vite 這類打包流程官方文檔給出了直接可行的路徑用 ES module 腳本從 esm.sh 加載excalidraw/excalidraw配合 import map 統(tǒng)一react、react-dom、react/jsx-runtime的版本并用window.EXCALIDRAW_ASSET_PATH控制字體等靜態(tài)資源的來源。本文按 integration.mdx 的 Browser 章節(jié)、installation.mdx 的字體自托管章節(jié)和 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 構(gòu)建通過?externalreact,react-dom參數(shù)排除了 react也就是說庫內(nèi)部仍然以裸說明符react、react/jsx-runtime、react-dom發(fā)起 import。這些裸說明符在瀏覽器里默認(rèn)無法解析import map 負(fù)責(zé)把它們統(tǒng)一指到同一份 esm.sh 地址避免頁面里出現(xiàn)多份 react 實例。因此 import map 不是可選項而是這條無打包器路徑的一部分。搭建最小頁面文檔把示例拆成了 HTML 和 JS 兩個 TabHTML Tab 給出head部分樣式、EXCALIDRAW_ASSET_PATH、import mapJS Tab 給出入口模塊代碼。把它們合成一個單文件頁面如下版本號excalidraw/excalidraw0.18.0、react19.0.0與文檔保持一致如果你要使用其他版本需同步替換庫和 import map 中的對應(yīng)地址。!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 里還有一行l(wèi)ink relstylesheet href./index.css /那是示例頁面自身的樣式文件與 Excalidraw 無關(guān)沒有對應(yīng)文件時省略即可。文檔 HTML Tab 的 body 里寫的是script typetext/javascript srcpackages/excalidraw/index.js/script這是倉庫源碼布局里的路徑獨立項目里無法直接訪問真正的入口代碼以 JS Tab 為準(zhǔn)也就是上面script typemodule內(nèi)的內(nèi)容。Excalidraw 會占滿容器塊 100% 的寬高所以容器必須有非零尺寸。示例中用style: { height: 500px }的內(nèi)層 div 保證畫布有高度。window.ExcalidrawLib ExcalidrawLib;把庫掛到全局便于在其他腳本里引用文檔示例保留了這一行可按需保留。驗證是否跑通打開頁面后看控制臺文檔示例代碼里會打印Excalidraw library和整個庫對象console.log(Excalidraw library, ExcalidrawLib)。能打印出帶Excalidraw等導(dǎo)出的對象說明模塊加載和 import map 解析都成功了。頁面中#app下應(yīng)出現(xiàn) 500px 高的白板。根據(jù) packages/excalidraw/README.md 給出的排查提示如果畫布是空白的先檢查兩件事——CSS 是否已引入、父容器高度是否為非零。這是文檔點名的兩個最常見集成失敗點。可選分支自托管字體與資源上面示例把EXCALIDRAW_ASSET_PATH指向 esm.sh 的dist/prod/地址。按 installation.mdx 和 README 的說法默認(rèn)情況下 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的內(nèi)容復(fù)制到你的靜態(tài)資源路徑例如項目的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動態(tài)設(shè)置的 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.——如果你沒有自托管意圖就不要設(shè)置這個變量讓字體走默認(rèn) CDN。倉庫內(nèi)的參考示例與限制文檔引用的完整示例在 examples/with-script-in-browser。它的 index.html 同樣通過window.EXCALIDRAW_ASSET_PATH https://esm.sh/excalidraw/excalidraw0.18.0/dist/prod/設(shè)置資源地址并通過script typemodule導(dǎo)入excalidraw/excalidraw后掛到window.ExcalidrawLibindex.tsx 再取用window.ExcalidrawLib渲染。這個示例使用 Vite 開發(fā)服務(wù)器vite.config.mts端口 3001來提供 TS 模塊適合對照學(xué)習(xí)完整用法本文前面的單文件頁面則是它的最小化等價物。類型定義位于excalidraw/excalidraw/types文檔同樣指向上面這個示例作參考。版本以文檔為準(zhǔn)文檔示例固定使用0.18.0庫 19.0.0React 的組合升級版本時 esm.sh 的 URL 和 import map 需要一起調(diào)整本文不展開版本兼容細(xì)節(jié)。完成以上步驟后你在瀏覽器里看到的就是一個與打包器集成方式行為一致的 Excalidraw 白板#app容器內(nèi)渲染 500px 高畫布控制臺可查到庫對象字體按EXCALIDRAW_ASSET_PATH或默認(rèn) CDN加載。后續(xù)若要加入initialData、事件回調(diào)等集成內(nèi)容文檔中的組件屬性說明和examples/with-script-in-browser里的ExampleApp是直接參照對象?！久赓M下載鏈接】excalidrawVirtual whiteboard for sketching hand-drawn like diagrams項目地址: https://gitcode.com/GitHub_Trending/ex/excalidraw創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考 如何不使用打包器、直接在瀏覽器中運行 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如果你的頁面是一個純靜態(tài) HTML 項目或者你想臨時驗證 Excalidraw 的嵌入效果而不想引入 Webpack、Vite 這類打包流程官方文檔給出了直接可行的路徑用 ES module 腳本從 esm.sh 加載excalidraw/excalidraw配合 import map 統(tǒng)一react、react-dom、react/jsx-runtime的版本并用window.EXCALIDRAW_ASSET_PATH控制字體等靜態(tài)資源的來源。本文按 integration.mdx 的 Browser 章節(jié)、installation.mdx 的字體自托管章節(jié)和 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 構(gòu)建通過?externalreact,react-dom參數(shù)排除了 react也就是說庫內(nèi)部仍然以裸說明符react、react/jsx-runtime、react-dom發(fā)起 import。這些裸說明符在瀏覽器里默認(rèn)無法解析import map 負(fù)責(zé)把它們統(tǒng)一指到同一份 esm.sh 地址避免頁面里出現(xiàn)多份 react 實例。因此 import map 不是可選項而是這條無打包器路徑的一部分。搭建最小頁面文檔把示例拆成了 HTML 和 JS 兩個 TabHTML Tab 給出head部分樣式、EXCALIDRAW_ASSET_PATH、import mapJS Tab 給出入口模塊代碼。把它們合成一個單文件頁面如下版本號excalidraw/excalidraw0.18.0、react19.0.0與文檔保持一致如果你要使用其他版本需同步替換庫和 import map 中的對應(yīng)地址。!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 里還有一行l(wèi)ink relstylesheet href./index.css /那是示例頁面自身的樣式文件與 Excalidraw 無關(guān)沒有對應(yīng)文件時省略即可。文檔 HTML Tab 的 body 里寫的是script typetext/javascript srcpackages/excalidraw/index.js/script這是倉庫源碼布局里的路徑獨立項目里無法直接訪問真正的入口代碼以 JS Tab 為準(zhǔn)也就是上面script typemodule內(nèi)的內(nèi)容。Excalidraw 會占滿容器塊 100% 的寬高所以容器必須有非零尺寸。示例中用style: { height: 500px }的內(nèi)層 div 保證畫布有高度。window.ExcalidrawLib ExcalidrawLib;把庫掛到全局便于在其他腳本里引用文檔示例保留了這一行可按需保留。驗證是否跑通打開頁面后看控制臺文檔示例代碼里會打印Excalidraw library和整個庫對象console.log(Excalidraw library, ExcalidrawLib)。能打印出帶Excalidraw等導(dǎo)出的對象說明模塊加載和 import map 解析都成功了。頁面中#app下應(yīng)出現(xiàn) 500px 高的白板。根據(jù) packages/excalidraw/README.md 給出的排查提示如果畫布是空白的先檢查兩件事——CSS 是否已引入、父容器高度是否為非零。這是文檔點名的兩個最常見集成失敗點。可選分支自托管字體與資源上面示例把EXCALIDRAW_ASSET_PATH指向 esm.sh 的dist/prod/地址。按 installation.mdx 和 README 的說法默認(rèn)情況下 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的內(nèi)容復(fù)制到你的靜態(tài)資源路徑例如項目的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動態(tài)設(shè)置的 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.——如果你沒有自托管意圖就不要設(shè)置這個變量讓字體走默認(rèn) CDN。倉庫內(nèi)的參考示例與限制文檔引用的完整示例在 examples/with-script-in-browser。它的 index.html 同樣通過window.EXCALIDRAW_ASSET_PATH https://esm.sh/excalidraw/excalidraw0.18.0/dist/prod/設(shè)置資源地址并通過script typemodule導(dǎo)入excalidraw/excalidraw后掛到window.ExcalidrawLibindex.tsx 再取用window.ExcalidrawLib渲染。這個示例使用 Vite 開發(fā)服務(wù)器vite.config.mts端口 3001來提供 TS 模塊適合對照學(xué)習(xí)完整用法本文前面的單文件頁面則是它的最小化等價物。類型定義位于excalidraw/excalidraw/types文檔同樣指向上面這個示例作參考。版本以文檔為準(zhǔn)文檔示例固定使用0.18.0庫 19.0.0React 的組合升級版本時 esm.sh 的 URL 和 import map 需要一起調(diào)整本文不展開版本兼容細(xì)節(jié)。完成以上步驟后你在瀏覽器里看到的就是一個與打包器集成方式行為一致的 Excalidraw 白板#app容器內(nèi)渲染 500px 高畫布控制臺可查到庫對象字體按EXCALIDRAW_ASSET_PATH或默認(rèn) CDN加載。后續(xù)若要加入initialData、事件回調(diào)等集成內(nèi)容文檔中的組件屬性說明和examples/with-script-in-browser里的ExampleApp是直接參照對象?！久赓M下載鏈接】excalidrawVirtual whiteboard for sketching hand-drawn like diagrams項目地址: https://gitcode.com/GitHub_Trending/ex/excalidraw創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考