# 透過 CDN 使用 Web SDK

- Human documentation: [https://docs.univer.ai/zh-TW/guides/boards/getting-started/installation/cdn](https://docs.univer.ai/zh-TW/guides/boards/getting-started/installation/cdn)

- Agent Markdown: [https://docs.univer.ai/zh-TW/guides/boards/getting-started/installation/cdn.md](https://docs.univer.ai/zh-TW/guides/boards/getting-started/installation/cdn.md)

- Requested language: `zh-TW`

- Content language: `zh-TW`

- Documentation version: `1.2.0`

- Source: [boards/getting-started/installation/cdn.zh-TW.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/boards/getting-started/installation/cdn.zh-TW.mdx)

---

Univer Boards 沒有 preset UMD 套件。請使用外掛程式模式把它加入現有的 Univer UMD 執行環境；以下程式碼區塊並不是獨立執行環境。

## 按相依順序載入

1. 載入 React、ReactDOM 和 RxJS。
2. 載入 Univer 共用相依套件：Core 和 Core Facade、算繪引擎、Design、UI、Docs 與 Docs UI、Drawing 與 Drawing UI、授權、形狀引擎及其 Facade、Ink 與 Ink UI、Shape Editor 及其 UI。
3. 載入下列 Boards 檔案。所有 `@univerjs` 和 `@univerjs-pro` 套件應使用相同版本。

```html
<script src="https://unpkg.com/@univerjs-pro/boards/lib/umd/index.js"></script>
<script src="https://unpkg.com/@univerjs-pro/boards-ui/lib/umd/index.js"></script>
<script src="https://unpkg.com/@univerjs-pro/boards/lib/umd/facade.js"></script>
<script src="https://unpkg.com/@univerjs-pro/boards-ui/lib/umd/facade.js"></script>
<script src="https://unpkg.com/@univerjs-pro/boards-ui/lib/umd/locale/zh-TW.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@univerjs-pro/boards-ui/lib/index.css" />
```

這些檔案公開 `UniverProBoards`、`UniverProBoardsUi`、`UniverProBoardsFacade` 和 `UniverProBoardsUiZhTW`。Boards UI Facade 檔案會為現有 Board facade 加入方法，不會建立新的全域命名空間。建立 Univer 時合併語言套件物件，再從前兩個命名空間註冊 `UniverBoardsPlugin` 和 `UniverBoardsUIPlugin`。

如需完整的套件管理器設定，請返回[安裝與基本使用](https://docs.univer.ai/zh-TW/guides/boards/getting-started/installation.md)。