使用什么框架来构建 Web 组件：lit-element vs stencil vs SkateJS？

Question

我想开始利用现在所有主要 Web 浏览器都支持的http://webcomponents.me W3C 标准。

我研究了互联网，到目前为止我发现了以下框架：

1. 模板 - 由离子创建。所有离子组件都使用这个框架/编译器来构建原生支持的 Web 组件。

2. lit-element - 由 Google 创建，是 Polymer 框架的一部分。

3. SkateJS - 不知道这背后的原因，但它位于前 3 名流行的 Web 组件框架中。

有人可以给我建议或意见哪个框架最好吗？

Answer 1

由于我在过去 4.5 年里一直将原生普通 JS Web 组件作为我的主要主题，因此我想作为一个拥有近 30 年经验的经验丰富的 Web 开发人员添加我的观点。

与所有开发工具一样，这些工具都有一个共同的问题。要么他们

• 进化 - 迫使您进入不希望的更新循环，让您忙于长期完成的事情，只是为了保持工具的新鲜和安全，
• 或者他们只是“死了” - 检查SkateJS例如，该存储库的最后一次提交现在已经有 3 岁了，并且存在 2019 年的未解决问题，甚至还没有评论。最新版本是2017年的！！

这不仅适用于您提到的三个建议之类的创作工具，也适用于整个构建堆栈工具。

去年，我深入了解了哪种现代构建工具适合用于创作 Web 组件库。在进行研究时，我偶然发现了Snowpack和Vite.js。我们开始使用 Snowpack，但当时它似乎仍然存在一些稳定性问题，因此我们决定切换到 Vite.js。上周我决定再次尝试 Snowpack，却发现它已被弃用，取而代之的是 Vite.js：

像这样的事情经常发生，虽然工具应该帮助您更快更好地完成工作，但您常常发现自己正在处理工具的缺点、更新主库时与插件的不兼容、安全问题......而不是专注于进行业务编码。

对于 Storybook 等流行工具来说也是如此。

一旦您开始仅依赖 ECMAScript 本身和浏览器 API，您就会发现大多数东西（例如 SPA 的路由）都很容易自己开发。

您可能很快就不再需要构建堆栈了。我们对 HTTP/2 有着广泛的支持，无论如何，捆绑都是不可取的，所以只需使用原生 ES 模块即可。不使用构建工具和不捆绑还有一个巨大的好处，那就是不必再生成和依赖地图；更不用说它通过保持领域内无论多么复杂的项目的周转时间来极大地改善开发体验ms。你编写的代码就是可以运行的代码——这有多神奇？当您的调试导致您需要花费数年时间才能理解的代码时，没有第三方黑匣子。

使用本机 CSS 和自定义属性而不是 CSS 预处理器-本机 CSS 嵌套也将出现在浏览器中。

为了完全实现无构建，不幸的是仍然缺少一些零碎的东西，但这些正在进行中。最重要的是：

• CSS 模块脚本<- 我们现在有了这些。万岁:)
• HTML 模块
• JSON 模块（第 3 阶段）

一些库已经开始关注这一点，例如ficus.js。

Answer 2

如果你想构建：

• 快速地
• 易于调试
• 跨浏览器
• 与框架无关

您也可以考虑使用 Web 组件 框架 ：

http://vanilla-js.com/