Stencil

Stencil 是由 Ionic 团队开发的开源编译器，用于创建标准化的 Web Components。其核心优势在于生成极轻量、高性能的组件，并确保它们能在任何现代浏览器以及 Angular、React、Vue 等主流框架中无缝运行。Stencil 采用 TypeScript 编写，提供异步渲染管道、JSX 支持、自动文档生成和零配置开发体验，让开发者专注于业务逻辑而非工具配置。

核心功能

• Web Components 编译：将组件编译为原生 Web Components，支持 Shadow DOM、slot 和自定义元素。
• 框架无关：生成的组件可在任何框架或不使用框架的项目中直接使用。
• TypeScript 支持：内置类型安全，并提供代码生成、单元测试、源码映射等开发工具。
• 文档生成：从 JSDoc 注释自动生成组件文档，确保文档与代码同步。

适用人群

• 需要构建跨框架组件库的前端团队。
• 希望使用 Web Components 技术栈的开发者。
• 对组件性能要求高、追求标准化的企业级应用开发者。

使用方法

1. 运行 npm init stencil 快速创建项目。
2. 使用 @Component 装饰器和 JSX 语法定义组件。
3. 通过编译输出可在任何页面中引入的独立组件文件。

注意事项

• Stencil 本身是一个编译器，而非运行时框架，实际运行依赖浏览器原生 Web Components 支持。
• 对于旧浏览器，可能需要引入 polyfill。

Stencil 广泛应用于需要统一 UI 组件库的大型项目，已被多家知名企业采用。