为何又要造轮?

在承接项目前端技术栈不确定的情况下,如何尽可能复用组件?

跨框架的组件无法很好的共享比如蛋疼的 Vue里嵌ReactReact里嵌Vue

除了 Stencil 还有谁?

去年其实有使用 Svelte 做过一个知识付费的项目。

Svelte 能达到的效果仅仅是能互相嵌入的使用,但在调用方面依然略显繁琐:

它依赖挂载点,这就需要不管是 vue 还是 react 或者非框架项目需要事先预留,且在挂载成功的周期函数去实例化它,以及后续的一些逻辑,嵌入的越多代码可读性会越糟糕。

小范围的嵌入式项目它依然是个不错的选择,但要成为一个整合共享组件的方案就显得略显不足。

Stencil 优势?

  • 作为 Ionic 的新成员,其品质有一定保证
  • 组件语言以 typescript 为主,并以此自动生成组件的文档是个亮点一定程度上提高了规范性以及降低维护成本
  • 生成的组件代码符合 web component 标准,这可以确保组件的生命周期可以延续
  • 可适配所有主流或非主流的框架,这也是它可以入选的重要原因
  • 可支持 ShadowDom,这让样式作用域得到了可靠的保护,组件之间避免了干扰,提升稳定性

目前进度

还在第一圈铺组件中