Stencil.js 组件库 - 关于 Stencil

这是关于使用 Stencil.js 创建 Web 组件库的系列文章中的第一篇

我从 2012 年开始从事专业的前端开发工作。那段时间，我学习了一个又一个 JavaScript 框架。一开始学习的是Backbone.js，但我非常不喜欢它。我确信它在当时是一个很棒的框架，但直到今天，我都把它当作一个贬义词。2012 年底，我很高兴学习了Angular.js，并且用 Angular.js 只用了两天时间就重写了我们复杂的主干应用程序，代码量大约只有原来的八分之一，这震惊了所有人。

那个周末，我开启了学习新 JavaScript 框架的热情，这种热情从未消退。我密切关注着Angular的开发，它是 Angular.js 的继承者，也是对 Angular 的完全重写，至今仍在 Domo 的现有工作中大量使用 Angular。React也随之而来，带来了一种不同的范式：它并非一个包罗万象的“框架”，而是一个视图渲染库。我喜欢学习一种全新的应用程序构建方式，即使用 React 之外的其他库，将我需要的各个部分连接在一起。当然，我也尝试过许多其他框架，包括但不限于Ember.js、Vue和Aurelia。

组件库

我强烈推荐使用组件库。除非你是一位出色的设计师和开发人员，否则它们会为我们大多数人简化很多事情。然而，在我上述所有框架实验中，我发现了一个主要的痛点。每当我使用一个新框架时，我使用的组件库很可能都有针对该新框架的特定版本，或者根本没有版本。例如，我在工作和业余项目中大量使用Angular Material。然而，每当我开发 React 应用程序时，所有这些组件显然都无法在该 React 应用程序中使用，因为它是 Angular 特定的。因此，我找到了最常用的 React 替代方案Material-UI。虽然这是一个很棒的库，但我现在必须进行上下文切换，因为这些组件是用完全不同的个体、架构和术语构建的。然而，这是最好的情况，因为这涉及两个最广泛使用的框架和一个最广泛使用的设计系统之一。

现在，许多公司都使用其业务风格指南开源自己的组件库。例如Atlassian 的Atlaskit、 VMWare 的Clarity或IBM 的Carbon。具体到 IBM，他们必须为 Angular 发布一个版本的库，为 React 发布一个版本的库，以及为没有框架的版本发布另一个版本的库，只包含 HTML 和 CSS 部分代码，类似于Bootstrap 的工作方式。对于大多数没有 IBM 资源的企业来说，这根本无法实现或维护。因此，许多企业会选择一个框架，然后只发布该库。

输入 Stencil.js

过去几年里，我很少像对Stencil.js这样对一项技术如此兴奋。它不是另一个框架；事实上，它根本不是一个框架。由Ionic团队构建的 Stencil.js 采用了不同的方法。他们没有提供组件框架，而是构建了一个组件编译器，该编译器接受使用现代工具和高级 API（例如TypeScript、装饰器和TSX ）构建的组件，并将它们编译为符合标准的Web 组件。您不需要框架来运行这些组件，它们使用原生浏览器 API 来渲染自定义元素。

Web 组件标准由各种 API 组成，它们共同支持您渲染复杂的自定义元素。虽然您完全可以自己编写这些 API，但它们被特意设计为低级 API。正因如此，我强烈推荐 Stencil，它汲取了 Angular 和 React 在组件构建方面的优势，并为您处理了其余的复杂工作，例如动态填充缺失的功能和执行异步渲染。它拥有 React 等库的所有优势，但使用平台本身，这使得您可以在任何框架中使用这些组件，甚至无需任何框架。

基本模板组件

让我们看一个基本的 Stencil 组件。

import { Component, h, Prop } from '@stencil/core';

@Component({
  tag: 'hello-world',
  styleUrl: 'hello-world.css'
})
export class HelloWorld {
  @Prop() name: string;

  render() {
    return (
      <p>
        Hello {this.name}!
      </p>
    );
  }
}

您只需在标准 HTML 页面中使用此组件即可，如下所示：

<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
    <hello-world name="John Woodruff"></hello-world>
  </body>
</html>

如果您熟悉 Angular，您就会认出组件装饰器：

@Component({
  tag: 'hello-world',
  styleUrl: 'hello-world.css'
})

此装饰器允许您定义 HTML 标签名称，以及为该组件提供 CSS 的样式表的链接。

组件装饰器之后，你就得到了一个简单的 TypeScript 类。你会注意到@Prop()类属性上name有一个装饰器。它定义了一个公共的 prop，你可以在自定义元素上使用它将字符串传递给该name属性。

最后，我们来看看标准render()方法。返回 TSX（TypeScript XML），它是将在自定义元素中渲染的标记。在本例中，我们只是返回一个<p>带有消息的标签。该消息是“Hello”，其中包含我们在 prop 中传入的名称。如果我们更改传递给 prop 的名称，组件会检测到并相应地重新渲染。

为什么选择 Stencil？

作为一名精明的读者，你可能会问自己，既然可以使用 Polymer，为什么还要选择 Stencil？答案是，Polymer 绝对欢迎你使用。它是一项伟大的技术，帮助将 Web 组件推向了更广泛的 Web 领域。我个人更喜欢用 Stencil 构建 Web 组件，而不是 Polymer，这主要归功于它的开发者经验和所使用的工具。它的体验与用 React 和 Angular 构建组件非常相似，而我对这两项技术都非常熟悉。

另一方面，Stencil 编译的 Web 组件性能高、体积小，并且非常易于构建和发布。您可以发布单个 Web 组件，也可以发布整个组件库。几个月来，我一直在使用 Stencil 构建我的工作组件库。这段经历对我来说非常积极，我们现在拥有一个共享组件库，可以在公司内部使用的各种框架中使用。

后续步骤

如果您已经读到这里，并且仍然有兴趣和我一起构建一个组件库，感谢您的阅读！这篇第一篇文章几乎没有实际的代码，因为我不想在您弄清楚原理和好处之前就直接讲解。既然我们已经了解了这些，我们下篇文章再见！

只想查看最终结果仓库？点击此处查看

鏂囩珷鏉ユ簮锛�https://dev.to/johnbwoodruff/component-libraries-with-stenciljs---about-stencil-10b7