Stencil通过类React语法构建跨框架Web Components，支持在Angular、React、Vue中使用。1. 初始化项目后，2. 创建带Prop和Slot的可复用组件如my-button，3. 配置stencil.config.ts输出多目标并启用Sass，4. 构建后发布至NPM，5. 在其他框架中引入即可使用，结合文档与类型提示提升体验。
使用 Stencil 构建可复用的组件库是打造跨框架 Web Components 的高效方式。Stencil 是一个编译工具，能将类 React/TypeScript 语法转换为标准的自定义元素（Web Components），可在 Angular、React、Vue 或纯 HTML 中无缝使用。
1. 初始化 Stencil 项目
开始前确保已安装 Node.js 和 npm。运行以下命令创建一个新的 Stencil 组件库项目：
npm init stencil选择 component 模板，输入项目名称，完成后进入项目目录。
项目结构包含：
- src/components/：存放所有组件
- stencil.config.ts：配置构建行为
- package.json：定义包名、版本和发布信息
2. 创建可复用组件
在 src/components 中新建组件文件夹，例如 my-button，并创建 my-button.tsx：
@Component({
tag: 'my-button',
styleUrl: 'my-button.css',
shadow: true
})
export class MyButton {
@Prop() variant: 'primary' | 'secondary' = 'primary';
@Prop() disabled = false;
render() {
return (
<button class={this.variant} disabled={this.disabled}>
<slot></slot>
</button>
);
}
}
这个按钮支持变体和禁用状态，并通过 <slot> 接收内容，具备良好封装性和扩展性。
3. 配置输出目标与样式
编辑 stencil.config.ts，确保组件库输出适用于多环境：
import { sass } from '@stencil/sass';
export const config: Config = {
outputTargets: [
{ type: 'dist' },
{ type: 'docs-readme' },
{ type: 'www', serviceWorker: null }
],
plugins: [sass()]
};
启用 Sass 插件可让你使用 SCSS 编写样式。Shadow DOM 提供样式隔离，避免外部样式干扰。
4. 构建与发布 NPM 包
运行构建命令生成最终产物：
输出位于 dist/ 目录，其中 dist/my-component-library 是主入口。
更新 package.json 中的字段：
-
name：如
@your-org/ui-components -
main：指向
dist/index.cjs.js -
module：指向
dist/index.esm.js - types：指向类型文件
- files：包含 dist、README 等
登录 npm 后执行：
npm publish dist/5. 在其他框架中使用
发布后，任何项目都可以安装并使用你的组件：
npm install @your-org/ui-components在 React 中使用：
import '@your-org/ui-components';function App() {
return <my-button variant="primary">Click me</my-button>;
}
在 Vue 或原生 HTML 中同样只需引入一次库即可全局注册组件。
基本上就这些。Stencil 让你用现代开发体验构建真正跨框架的 UI 库，核心在于合理设计组件 API 和正确配置打包输出。不复杂但容易忽略的是文档和类型提示，建议配合生成 README 和 Storybook 提升可用性。
