如何用Stencil构建一个可复用的组件库？-js教程-PHP中文网

如何用Stencil构建一个可复用的组件库？

夜晨

发布： 2025-09-29 19:23:01

原创

713人浏览过

Stencil通过类React语法构建跨框架Web Components，支持在Angular、React、Vue中使用。1. 初始化项目后，2. 创建带Prop和Slot的可复用组件如my-button，3. 配置stencil.config.ts输出多目标并启用Sass，4. 构建后发布至NPM，5. 在其他框架中引入即可使用，结合文档与类型提示提升体验。

如何用stencil构建一个可复用的组件库？

使用 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：

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

@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 { Config } from '@stencil/core';
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 提供样式隔离，避免外部样式干扰。