【前端必知】胶水（框架） Stencil.js

2019 年 9 月 23 日 phodal

去年的同一时间，我写了那篇《前端下半场：构建跨框架的 UI 库》推荐了 Stencil.js，当时是在项目的试验期。而 Stencil.js 已经在今年（2019 ）的 6 月份，推出了 1.0 正式版，这意味着你已经可以开始采用这个框架（编译器）了——当然了，我不对我的这句话『负责』，你自己的锅自己背。

故事是这么开始的。

上周我在为 @花仲马 ~~复制~~ （开发）一个内容主题生成器（ https://content.phodal.com ）（受限于其中数据的版权问题，暂时不敢开源——我都是直接复制别的网站的），便开始在寻找一个能用得上的前端框架。毕竟：

React 用腻了
Angular 用腻了
Vue 要出 3.0 了
jQuery 可能会被笑话
原生 JavaScript 我不会了

所以，我开始绞尽脑汁找一个新的框架，直到我从 Web Components 框架里又找到了 Stencil.js。

过去，我曾经使用过 Ionic 开发了超过两位数的应用，除了 stars 数上千的 Growth，还有一个交易额 xxxxx 千亿的商业应用。所以，既然是 Ionic Framework 团队开发的框架，那我还是有点信心 ~~担心~~ 的。

为什么是 Stencil.js

Ctrl + C/V 一下官方的介绍：Stencil 是一个生成 Web Component 的编译器（更具体地说，Custom Elements）。Stencil 将最流行框架的最佳概念，结合到一个简单的构建时工具中。

它提供了以下的特性。

Virtual DOM
Async rendering
Reactive data-binding
TypeScript
JSX

为什么说它结合了最流行框架的最佳概念——它的代码看上去就像 Angular + React 的混合体：使用了 装饰器 来声明类型，还有类似于 Angular 风格的 Component 声明方式，以及还有 React 的 TSX，还有 Vue 融合了多个框架的思想和能力……。

  
  
    
   
   
     @Component({
   
   
      tag: 'my-component',
   
   
      styleUrl: 'my-component.css',
   
   
      shadow: true
   
   
     })
   
   
     export class MyComponent {
   
   
      @Prop() first: string;
   
   
     

   
   
      private getText(): string {
   
   
      return this.first;
   
   
      }
   
   
     

   
   
      render() {
   
   
      return <div>Hello, World! I'm {this.getText()}</div>;
   
   
      }
   
   
     }

So，Stencil.js 便是面向未来的集大成者——你们都抄不过我的。

由于使用 Stencil 开发的组件只是 Web Components，所以这些组件可以运行在所有的主流框架（AVR）中，也可以独立地运行。这一特质使它可以成为新的前端容器框架——毕竟 Web Components 是一个新的前端容器。

用途一：开发前端应用

好吧，没啥说的，大家都懂。

不过呢，Stencil.js 用来开发前端应用的另外一个优势是，已经有一个成熟的组件库：Ionic 系列的组件库。而 Ionic 系列的组件，已经在大量的应用验证过了。

除此，还与有内建了 Service Workers 生成工具。

顺带夸奖一下 Ionic 团队，这一步步下的棋非常棒。先是开发了用于 Angular.js 和 Angular 的 Ionic，然后开发了 Ionic Native，并且让 Ionic 可以支持不同的框架，现在又有了 Stencil.js。

用途二：连接混合应用

尽管 Flutter、React Native 已经很流行了，但是对于没有 Native 能力的团队来说，混合应用仍然是一个非常友好的选择。

标题的说法可能不太准确，不过呢，Stencil.js 是 Ionic 框架背后的组件库的支撑框架，它变成了 Ionic 这个混合应用框架的核心之一。

用途三：连接其它前端框架

嗯，Web Components 的一大特质，就是让你编写的应用可以嵌入其它框架中。

用途四：构建跨框架的 UI 库 / 设计系统

由于 Stencil.js 是一个基于 Web Components 设计的框架，因此由它创建的组件库，可以轻松地在可以引入 Web Component 的浏览器和框架上运行。

Stencil.js 存在的另一大特质是 按需加载。基于 Stencil.js 构建的组件库，呈现的结构是：单一组件以单一 chunk/entry 的形式存在。

如下是在 Stencil.js 中引入 Ionic 组件库时，生成的组件与 *.entry.js 的绑定关系：

  
  
    
   
   
     [[1, "ion-avatar"]]], [{
   
   
      "ios": "p-lyuug53j",
   
   
      "md": "p-hixhmhon"
   
   
     }, [[1, "ion-badge", {"color": [1]}]]], [{
   
   
      "ios": "p-q6fmpdfd",
   
   
      "md": "p-daqtamux"
   
   
     }, [[0, "ion-card-content"]]], [{
   
   
      "ios": "p-xn1drh7m",
   
   
      "md": "p-b9b9dqwt"
   
   
     }