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