無構建

長途關係通常涉及頻繁的飛行。在這些航班期間，趕上Reddit的想法變得吸引人。我決定構建自己的現代網絡技術和“無構建”開發方法，而不是尋找離線Reddit應用程序。

這篇文章慶祝創新的網絡開發人員及其貢獻。雖然不是分步教程，但可以在GitHub上獲得完整的代碼。

目標是Reddit讀取器，最大程度地減少了工具和依賴項。我們將利用：

• litelement：輕巧，易於使用的組件模型利用Web組件。
• @Vaadin/Router：具有出色開發人員體驗的緊湊型路由器。
• @pika/web：簡化開發過程中的模塊管理。
• ES-DEV服務器：直接的DEV服務器（儘管任何HTTP服務器都可以使用）。

我們還將利用瀏覽器標準：ES模塊，Web組件，導入地圖，KV存儲和服務工作者。

依賴性安裝：

 npm i -s lit -Element @vaadin/路由器
NPM I -D @Pika/Web ES-DEV服務器

添加一個postinstall腳本到package.json ：

 “腳本”：{
  “開始”：“ es-dev-server”，
  “郵政安裝”：“ Pika-Web”
}

皮卡：簡化依賴性

Pika（由Fred K. Schott）簡化了Web開發，將依賴項安裝為web_modules/ Directory中的單個JavaScript文件。這簡化了過程並避免複雜的構建配置。輸出類似於：

 <code>└─ web_modules/ ├─ lit-element.js └─ @vaadin └─ router.js</code>

導入地圖：解決裸露的指定符

我們的index.html包含一個用於處理裸模塊指定符的導入映射：

<script type="importmap">
  {
    "imports": {
      "@vaadin/router": "/web_modules/@vaadin/router.js",
      "lit-element": "/web_modules/lit-element.js"
    }
  }
</script>
<reddit-pwa-app></reddit-pwa-app>

reddit-pwa-app.js ：

從“ lit-Element”導入{litelement，html}；

redditpwaapp類擴展了litelement {
  使成為（） {
    返回html`<h1 id="你好世界">你好世界！</h1> `;
  }
}

customElement.define（'reddit-pwa-app'，redditpwaapp）;

導入地圖求解了裸模塊指定問題，從而無需複雜的構建過程即可啟用瀏覽器兼容性。

服務工作者：離線功能

要啟用離線訪問，我們在index.html中實施了一個服務工作者（ sw.js ）：

如果（Navigator中的'ServiceWorker'）{
  window.addeventlistener（'load'，（）=> {
    Navigator.ServiceWorker.Register（'./ sw.js'）;
  }）;
}

服務工作者預資產，確保離線功能。皮卡通過提供清晰的資產清單來簡化這一點。 （有關sw.js的詳細信息，請參見GitHub回購）。

KV存儲：離線數據持久性

為了節省帖子，我們使用KV Storage，這是一個內置的模塊，該模塊在索引EDEXEDDB的頂部分層。它提供了異步操作，並且在LocalStorage上的性能提高了。多填充用於確保更廣泛的瀏覽器支持。 （有關實施詳細信息，請參見GitHub回購）。

用進口地圖進行多填充

包括KV kv-storage-polyfill ）並通過導入地圖進行管理，如果沒有本機KV存儲，則提供後備機制。

結論

該項目展示了建立一個具有最小依賴性的功能性PWA，突出了現代網絡標準的好處和無建造方法。儘管存在替代構建工具，但此方法優先考慮簡單性和易於訪問的便利性。 GitHub存儲庫提供了完整的代碼庫，以進行進一步探索。歡迎在Twitter（@passle_或@openwc）和Open-wc.org上進行反饋和討論。

致謝：

特別感謝Guy Bedford（Es-Module-Shims），Luke Jackson（“不要構建該應用！”），Benny Powers和Lars Den Bakker的貢獻。

以上是無構建的詳細內容。更多資訊請關注PHP中文網其他相關文章！