svelte - vite 開發 Web Components
引言
最近要做一個跨平臺使用的卡片插件，考慮到插件的通用性，就選擇了 Web Components 技術來實現
Web Components 概念
Web Components 是一套不同的技術，允許你創建可重用的定製元素（它們的功能封裝在你的代碼之外）並且在你的 web 應用中使用它們。
它由三項主要技術組成：
1、Custom element（自定義元素）：一組 JavaScript API，允許您定義 custom elements 及其行爲，然後可以在您的用戶界面中按照需要使用它們。
2、Shadow DOM（影子 DOM）：一組 JavaScript API，用於將封裝的 “影子”DOM 樹附加到元素（與主文檔 DOM 分開呈現）並控制其關聯的功能。通過這種方式，您可以保持元素的功能私有，這樣它們就可以被腳本化和樣式化，而不用擔心與文檔的其他部分發生衝突。
3、HTML template（HTML 模板）：<template> 和 <slot> 元素使您可以編寫不在呈現頁面中顯示的標記模板。然後它們可以作爲自定義元素結構的基礎被多次重用。
兼容性
現階段的 Safari 和 Chrome 已經都原生支持了 Web Components 的規範標準。Firefox，Edge 和 IE11 在 Polyfill 的支持下也都能很好的支持 Web Components。
技術選型
考慮到學習成本，這裏只對比了一些主流框架
前端框架的滿意度 & 關注度走勢
前端框架的性能測試
越綠表示分越高
前端框架包體積的對比
無論是滿意度、關注度還是性能，Svelte 都是很突出優秀的，下面看一下它的優勢
Svelte 優勢
1、不需要運行時代碼的框架，因此減少了框架運行時的代碼量；
2、減少代碼量：構建的組件無需依賴模板文件；
3、無虛擬 DOM：Svelte 將你的代碼編譯成體積小、不依賴框架的普通 JS 代碼，在構建時運行，將組件轉換爲命令式代碼，以手術方式更新 DOM；
4、真正的響應式：無需複雜的狀態管理庫，Svelte 爲 js 自身添加反應能力，因爲他是一個編譯器，可以通過在幕後來檢測賦值；
5、最主要的是 Svelte 是生來就支持 CustomElements ，並提供了編譯 API。
所以我選擇了 svelte
而選擇 vite 主要原因就是快
項目搭建
1、npm init vite@latest 下載模版命令
2、輸入項目名稱 vite_svelte_comps
3、選擇 svelte 模版（這裏還可以選擇 ts）
4、進入項目並安裝 npm install
5、運行 npm dev
開發一個 Counter Web Components
Counter.svelte
將自定義組件轉成通用組件
需要將自定義 Svelte 組件轉成通用的 Web Component ，這樣纔可以在其他框架中直接使用。
需要在 svelte.config.js 文件中 compilerOptions: {customElement: true}
然後在組件內定義元素名稱<svelte:options tag="my-custom-counter"/>
在 index.js 中導出
打包
打包 npm run build
註冊並登錄 npm 賬號
1、首先要在 https://www.npmjs.com/ 官網上註冊一個賬號
2、註冊成功後，在終端登錄 npm 賬號 npm login (登錄 npm 賬號，密碼，郵箱驗證)
Username: npm 用戶名
Password: npm 登錄密碼
Email: npm 綁定的郵箱；回車後，會向你的郵箱發送一個驗證碼
Enter one-time password: 你郵箱收到的6位數驗證碼3、登錄成功
發佈到 npm 上
進入項目所在的終端，輸入指令 npm publish
下面是發佈成功後的樣子
react 項目中的引用情況
npm i vite_svelte_comps
使用 demo 地址：https://codesandbox.io/s/awesome-saha-05stz8?file=/src/App.js
vue 項目中的引用情況
npm i vite_svelte_comps
使用 demo 地址：https://codesandbox.io/s/wonderful-galileo-pnmryi?file=/src/App.vue
參考資料
[1] 性能測試 (https://rawgit.com/krausest/js-framework-benchmark/master/webdriver-ts-results/table.html)
[2] svelte 中文網 (https://www.sveltejs.cn/)
[3] All the Ways to Make a Web Component(https://webcomponents.dev/blog/all-the-ways-to-make-a-web-component/)
[4] WebComponents 框架對比 (https://zhoukekestar.github.io/notes/2020/02/07/webcomponents.html)
[5] [Web Component(https://developer.mozilla.org/zh-CN/docs/Web/Web_Components)
本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/BNbAI2ClX1-iZExFvOOG8g