使用 Stencil.js 创建 Web 组件

如果你曾经接手过一个包含 3000、5000 甚至 8000 多行 CSS 代码的单个文件，然后发现同一个文件在很多项目中都有不同的版本，请举手。那个鼠标悬停状态各不相同的提交按钮简直让人抓狂。你想创建一个组件库，却不得不在所有应用程序中导入它，每次都要面对不同的技术栈，还要修改大量的 CSS 选择器。当你迁移到另一个框架时，一切又要重来。解决方案：Web Components。

“Web Components 是一套不同的技术，允许您创建可重用的自定义用户界面组件——其功能与代码的其他部分隔离——并在您的 Web 应用程序中使用它们。” —— MDN

最近一位朋友向我介绍了Stencil.js。真是太感谢他了！Stencil 由 Ionic Framework 团队开发，它是一个编译器，可以将你的 JSX 和 Sass 代码编译成 Web Components，并将其打包成 NPM 包，方便导入到所有项目中。这样，你就可以使用一个统一的源代码，为所有应用程序提供一致的品牌形象和行为。而且它与框架无关！

创建组件

使用 JavaScript 类语法，您可以将组件命名为“MyComponent”。使用 `@Component` 装饰器指定 HTML 标签名称和您的 Sass 文件。使用 `@Prop` 装饰器传递 props，并使用 JSX 语法调用它们。

/components
   /component-name
      /component-name.tsx
      /component-name.scss

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

@Component({
  tag: 'my-first-component',
  styleUrl: 'my-first-component.scss'
})
export class MyComponent {

  // Indicate that name should be a public property on the component
  @Prop() name: string;

  render() {
    return (
      <p>
        My name is {this.name}
      </p>
    );
  }
}

分配

他们的入门模板设置非常便捷，可将您的组件轻松发布为 NPM 包。然后，您可以使用 `npm install` 或 unpkg CDN。在您的 index.html 文件中添加一个 script 标签，并将 src 指向您的 dist 文件。瞧！您的组件现已注册/定义完毕，可以使用了。分发文档。

用法

<my-first-component name="Max"></my-first-component>

情况会好转的

• 它会在组件出现在 DOM 中时才进行延迟加载。如果我理解正确的话，HTML 标签会被注册，但其余的自定义内容会在浏览器即将渲染每个组件时才加载。
• Shadow DOM。您的组件已设置作用域。样式不会冲突！
• 组件具有类似 React 的生命周期。[componentWillLoad, componentDidLoad, componentWillUpdate, componentDidUpdate, componentDidUnload]
• 可以使用 @State 装饰器来处理组件状态。
• 还有更多……

我还在学习更多关于这个工具的信息，也在寻找其他可以考虑的技术。请告诉我你的想法和建议。

请查看文档进行尝试。

发布视频