2019 年开发 Web 组件的 7 个工具

野外的 Web 组件：从 lit-html 到 Stencil、Svelete 等等。

最近，关于 web-components 的讨论非常热烈。原因如下：基于 Web Component 标准构建的组件和小部件，可以在现代浏览器上运行，并且可以与任何支持 HTML 的 JavaScript 库或框架一起使用。

这意味着更高的复用性、更好的稳定性、抽象性和标准化、更少的工作量，以及模块化带来的几乎所有其他好处。虽然许多人还在等待像Web-Assembly这样的项目，但在过去的一年里，我们看到新的工具和技术不断涌现，将未来带入现实。

因此，在这篇文章中，我将回顾 5 个您应该了解的未排名工具，如果您正在考虑在 2019 年使用 Web 组件，请考虑这些工具。此列表仅仅是个开始，所以请随时发表评论并推荐您自己的工具！

让我们开始吧。

1. 位

Bit是一个平台和开源工具，旨在通过组件的开发和组合来帮助构建模块化应用程序。

Bit具有一些创新的关键功能，可以实现更好的组件模块化和可重用性，这与 Web 组件的不可知和可重用特性完美匹配。

首先，它会自动定义组件的完整依赖关系图，从而将其与项目无缝隔离。您只需一个命令即可从项目中单独发布多个组件，无需任何重构！

其次，最酷的是，除了使用 NPM/Yarn 安装每个组件之外，你还可以使用 Bit 将组件引入新项目，并在那里进行开发，修改源代码、调整样式或根据需要进行其他任何更改。无需再等待 PR。

第三，Bit 可以跨项目管理组件的源代码和依赖关系图。这是一个重要的声明，也是在多个项目中以任意规模重新使用组件的关键。您可以使用一个命令同步代码库中组件的更改，并准确了解哪些依赖项发生了更改以及更改的位置。这对于逐步重构和减少维护工作量非常有用。

最后，repo 中的所有组件都可以共享到 bit.dev（Bit hub），在那里它们以类似集合的可视化“播放列表”形式组织，以便您的团队可以快速共享、发现和重用组件。

这是一个示例的有线元素 Web 组件库。请注意，每个组件在使用前都可以在实时 Playground 中运行。

有线元素 Web 组件

Bit 使用组件加速模块化应用程序开发，以便更轻松地维护您的代码库（例如，完全控制的逐步重构），有助于提高测试覆盖率并提高代码可重用性，同时允许演变。

2. lit-html 和 lit-element

Lit-html本质上是一个可定制的 Web 组件构建工具包。它是“一个高效、富有表现力、可扩展的 JavaScript HTML 模板库”。这意味着，Lit-html 使用 JavaScript 模板字符串通过模板字面量（例如）创建动态模板。

lit-html 使用快速平台功能（例如<template>具有原生克隆功能的 HTML 元素）来提升效率，并且只更新模板中实际更改的部分——不会重新渲染整个视图。速度相当快。

模板是一些值（字符串、DOM 节点、异构列表、嵌套模板等），它们可以被计算、传递给函数或从函数中传递，并且能够嵌套。表达式是 JavaScript，可以包含所需的内容。

指令定制如何处理值，允许异步值、高效的键控重复、错误边界等。

Lit-element是一个“用于创建快速、轻量级 Web 组件的简单基类”。它使用lit-html渲染到元素的Shadow DOM中，并添加了 API 来帮助管理元素的属性 (properties) 和特性 (attribute)。LitElement 会对属性的变化做出响应，并使用 lit-html 进行声明式渲染。

LitElement 可以轻松定义 Web 组件，以便在您的组织内共享元素或构建 UI 设计系统，因此它与Bit 的组合非常强大，可以轻松创建、复用、管理和同步组件。Bit 平台甚至可以将组件可视化，因此您的 Bit 集合不仅仅是一组可复用的组件，而是一个可视化的组件设计系统，您可以在任何地方共享、使用和开发！

聚合物/lit-html

3. StencilJS

Stencil由 Ionic 团队创建，是一个“用于构建快速、可重用的 UI 组件和渐进式 Web 应用的 Web 组件编译器”。也就是说，它是一个用于生成 Web 组件和渐进式 Web 应用 (PWA) 的编译器。

它使用 TypeScript、JSX、微小的虚拟 DOM 层、高效的单向数据绑定、异步渲染管道和延迟加载来生成可在现代和传统浏览器上运行的基于标准的 Web 组件。

Stencil 还为 Web 组件解锁了新功能，例如无需运行无头浏览器即可进行服务器端渲染、预渲染以及将对象作为属性（而不仅仅是字符串）。创建组件非常简单，因为 Stencil 组件是带有一些装饰器元数据的普通 ES6/TypeScript 类。快来看看吧！

4. Svelte JS

Svelte是一个“编译器”，它会将你的声明式组​​件转换为高效的 JavaScript，并在应用程序状态发生变化时精准地更新 DOM”。这意味着，你可以使用 CSS、HTML 和纯 JavaScript 构建无需模板的组件，Svelt 会将其编译成小巧轻量且内置响应式的 JS 代码。

听起来既令人惊叹又简单，对吧？另一个有用的功能是JS 库内置了对任何与框架无关的 CSS 的支持。

Svelte 是迈向框架无关 Web 组件的重要一步，其工作流程支持逐步重构，在这方面非常有用。将 Svelete 与 Bit 结合使用，意味着您拥有一个框架无关的组件工具箱，您可以在任何地方轻松使用，甚至可以构建样式组件来设置其他组件的样式，将样式转化为一种组合方式。

sveltejs/svelte

5. Angular 元素

Angular Elements是 Angular 中的一个新包，它帮助我们将 Angular 组件发布为自定义元素。它通过将 Angular 组件编译为 Web 组件来实现这一点。

这种从框架端弥合框架无关差距的突出尝试非常有趣，因为@angular/elements 包导出了一个createCustomElement () API，它提供了从 Angular 的组件接口和变化检测到内置 DOM API 的桥梁。

实际上，您可以使用新的createCustomElement () 函数将组件转换为类，并在浏览器中将其注册为自定义元素。然后，您就可以像使用内置 HTML 元素一样，在直接添加到 DOM 的内容中使用新元素。这为您的 NG 工作流程增添了新功能，从更好的关注点分离和可重用性到 SSR！

6. 混合动力车

Hybrids是一个“用于创建Web 组件的UI 库，它更倾向于使用普通对象和纯函数，而不是类和 this 语法”。它提供了用于创建自定义元素的简单实用的 API。

它提供了一种声明式的自定义元素创建方法。它融合了函数式和面向对象架构，并采用独特的自定义元素定义方法。以下示例基于三个与属性相关的概念：描述符、工厂和翻译。该库使用变更检测和缓存机制来简化组件的生命周期。

import { define } from 'hybrids';

const MyElement = {
  count: 0,
  render: ({ count }) => {...},
};

define('my-element', MyElement);

“额外”功能包括基于带标签模板字面量的模板引擎和热模块替换支持，以加快开发速度。简洁。hybridsjs
/hybrids
*👾 使用普通对象和纯函数构建 Web 组件！— hybridsjs/hybrids*github.com

7. 印记

Sigil是一个“函数式 Web 组件库”。它的特点包括：使用 Web 组件的可复用 HTML 元素；使用snabbadom实现超快速重新渲染的虚拟 DOM ；支持使用强大表达式绑定属性的 HTML 模板语言；减少重新渲染次数的纯函数式视图组件样式；以及对Redux和Kamea等基于不可变 Flux 的存储的支持。您可以点击此处使用 JSFiddle亲自体验。