創建 Svelte Web 組件

在這篇文章裏我們來研究如何製作實用的 Svelte Web 組件，然後拿 Svelte 組件和其他框架做的類似組件做一個比較。

免責聲明：這篇文章並不是要對比 Svelte 與 Angular 框架。本文主要介紹創建 Svelte Web 組件的方法，順便分享了使用 Angular 創建的類似 Web 組件。我覺得這和框架對比的主題相去甚遠，這篇文章談的不是框架之間的高低不同。

Svelte 是什麼？

Svelte 是一種構建用戶界面的全新方法。像 React 和 Vue 這樣的傳統框架會在瀏覽器中完成大部分工作，而 Svelte 則將這些工作轉移到了在構建應用時發生的編譯步驟中。

這段說明是從 Svelte.dev 網站直接引用的。可以訪問這個網站獲取更多信息。

如何創建 Svelte Web 組件？

設置 Svelte 項目

首先從 Svelte 提供的克隆模板開始，並設置軟件包：

使用 TypeScript（可選）

雖然 Svelte 還沒有對 TypeScript 提供官方支持，但也有一種方法可以用上 TypeScript。Svelte 社區提供了一些 VS Code 擴展和模板。不過目前我會繼續使用 JavaScript，同時單獨使用 TypeScript 來編寫和編譯 TS 文件，並將它們用作 JS 文件。

tsc--init 命令將創建 tsconfig.json 文件，你還需要指定一些選項。"outDir": "./src", "rootDir": "./ts", "baseUrl": "./ts"，這樣你就可以將 TS 文件放在 ts 文件夾中，然後它們會被編譯並放入 src 文件夾，在 TS watcher 的輔助下保存成文件。

創建 Svelte 組件

App.svelte 組件位於模板的 src 文件夾中。它將被導入到創建和導出應用的 main.js 文件中。

首先，你需要更新 rollup.config.js：
然後是重命名操作：App.svelte->snake.svelte，同時更新 main.js。
你需要告訴 Svelte 你將把組件導出爲 Web 組件。在 svelte 組件中加入這一行代碼：

<svelte:options tag=”svelte-snake” immutable={true} />

你放在標籤中的內容都會成爲最終的 bundle.js 中實際包含的 Web 組件標籤。另請注意，我使用的是 immutable={true}，因爲我的狀態是不可變的，因此 Svelte 使用參考相等性檢查來提高性能。

你不需要在 main.js 中實際創建組件，因爲我們將導出爲 Web 組件。你只需要導入和導出組件即可。看一下我的 main.js 示例：
更新 public/index.html 以使用我們的 Web 組件，讓它在開發過程中正確顯示在瀏覽器中。

<body><svelte-snake></svelte-snake></body>

現在你已經準備好開發 snake.svelte 組件了，然後我們會將其導出爲 Web 組件。

構建和部署

執行 npm run build 命令，然後 bundle.js 文件將在 public/build 文件夾中創建出來。它包含了我們完整的 Web 組件，帶有樣式和其他一些必要的 Svelte 代碼。

我將 Web 組件發佈到了 GitHub Pages 上。你也可以這樣做，具體可參考 GitHub Pages 入門教程，它還會提供 gzip 壓縮後的 bundle.js 文件，所以我就不用自己打包了。

在項目的根文件夾中創建 docs 文件夾；
複製 docs 文件夾中的 bundle.js；
創建 index.html 文件並將其放在 docs 文件夾中。它需要一些合適的基本 href 和腳本導入。參考我的例子：
最後，你可以使用：

<body><svelte-snake></svelte-snake></body>

你可以告訴 GitHub 從你項目的 docs 文件夾中提供靜態文件。轉到 GitHub Repository Settings->Options->GitHub Pages->Source->master branch/docs folder。

打包大小

這個項目的 src 文件夾包含多個 JS 文件和一個 Svelte 組件。

我們看一下它們的大小：

input.js，main.js，map.js，models.js，snake.js，store.js：〜10.7KB/〜2.6KB（gzip 壓縮後）
snake.svelte：〜3.5KB/〜1.2KB（gzip 壓縮後）

在 npm run build 之後，Svelte 將所有源文件編譯到一個 bundle.js 文件中，該文件包含讓 Web 組件正常工作所需要的所有 Svelte 函數。在 Svelte 中沒有運行時，有一些函數可以讓模板根據更改來進行對應的更新，並且所有響應代碼都可以正常工作。這些代碼是在編譯時生成的。我沒有使用的內容全都不會出現在 bundle.js 中。此外，bundle.js 也已經過壓縮與合併處理。

bundle.js：〜13.7KB/〜5.4KB（gzip 壓縮後）

自己試用一下 Svelte Web 組件

bundle.js 包含讓 svelte-snake Web 組件正常工作所需的所有代碼。你可以在本地創建示例 index.html，在瀏覽器中打開它，然後查看成品的效果和包的大小。例如，使用以下 index.html：

樣本 index.html

對比 Angular Snake Web 組件

在我的另一篇文章中，我使用 Angular 9 創建了完全相同的 Web 組件。Angular 的最終打包體積明顯要大一些：〜51KB（gzip 壓縮後），而 Svelte 是〜5.4KB（gzip 壓縮後），但這並不是說 Angular 或 Svelte 在創建 Web 組件方面有更好的表現。

Angular 帶有運行時，並且由於 RxJS 的緣故，組件包也會更大一些。Angular 是一個完整的框架，所以即便它在產品構建過程中有一個很好的搖樹流程，它的成本還是客觀存在的。但如果要構建的應用程序並不打算儘可能縮減體積的話，這部分成本就可以忽略不計了。Angular 具有非常完善的生態系統，因此它的足跡更大也可以理解。在我看來，Angular Web 組件有自己的價值和用武之地。
Svelte 的足跡會小一些，因爲它沒有運行時。Svelte 設法在編譯時確定組件正常工作所需的條件。然後它會注入特定的 Svelte 函數以支持模板、綁定和響應式代碼運行。這裏沒有單獨的運行時來通過更改更新模板。你編寫好響應式代碼，然後 Svelte 將其轉換成命令式的對等代碼以提高性能。

聲明：

本文於網絡整理，版權歸原作者所有，如來源信息有誤或侵犯權益，請聯繫我們刪除或授權事宜。

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/zvSYxqxO5LeJmBCakxza0Q

猜你喜歡