无构建

长途关系通常涉及频繁的飞行。在这些航班期间，赶上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中文网其他相关文章！