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：
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 (
);
}
}
这个按钮支持变体和禁用状态，并通过 接收内容，具备良好封装性和扩展性。
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 提供样式隔离，避免外部样式干扰。
4. 构建与发布 NPM 包
运行构建命令生成最终产物：
npm run build
输出位于 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 Click me;
}
在 Vue 或原生 HTML 中同样只需引入一次库即可全局注册组件。
基本上就这些。Stencil 让你用现代开发体验构建真正跨框架的 UI 库，核心在于合理设计组件 API 和正确配置打包输出。不复杂但容易忽略的是文档和类型提示，建议配合生成 README 和 Storybook 提升可用性。
以上就是如何用Stencil构建一个可复用的组件库？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1524598.html
微信扫一扫 
支付宝扫一扫 
