如何在Storybook React应用中嵌入StencilJS组件（无需发布至NPM）

我太懂这种不想走NPM发布流程、只想本地搞定Stencil和Storybook集成的需求了！你已经搭好了src组件库和storybook目录，卡在编译后复制dist这一步？其实完全可以绕开手动复制，甚至不用发布，直接本地引用就行，我给你梳理几个实用的解决办法：

1. 先调整Stencil的编译配置 #

首先确保你的stencil.config.ts输出的产物方便Storybook访问，比如保留dist输出目标，同时开启适合前端导入的格式：

export const config: Config = {
  namespace: 'your-components',
  outputTargets: [
    {
      type: 'dist',
      esmLoaderPath: '../loader',
    },
    {
      type: 'dist-custom-elements', // 如果你用自定义元素模式，这个很有用
      dir: './dist/custom-elements',
    },
    // 保留你需要的其他输出目标，比如文档、类型定义等
  ],
};

2. 直接本地引用编译后的组件，不用复制dist #

其实完全没必要手动复制dist目录到Storybook里，直接在Storybook配置或故事文件里引用本地编译产物就好：

• 全局注册所有组件：在.storybook/preview.js里添加组件注册代码

import { defineCustomElements } from '../dist/custom-elements/loader';

// 全局注册所有自定义元素
defineCustomElements(window);

• 按需导入单个组件：在特定的故事文件里直接引入组件的JS文件

// 比如你的按钮组件
import '../dist/components/your-button/your-button.js';

3. 如果坚持要自动复制dist，用脚本代替手动操作 #

要是你还是想把dist目录同步到Storybook目录下，别手动复制了，写个npm脚本自动完成，避免路径或权限问题：
在package.json的scripts里添加：

{
  "scripts": {
    "build:components": "stencil build",
    "copy:dist": "cp -r dist storybook/public/", // 类Unix系统用这个
    // Windows系统换成："xcopy dist storybook\\public\\dist /E /I /Y"
    "build:storybook": "npm run build:components && npm run copy:dist && storybook build"
  }
}

之后运行npm run build:storybook就会自动先编译组件、复制dist，再构建Storybook，全程不用手动干预。

4. 给Storybook配置静态资源路径 #

最后确保Storybook能识别到你的dist目录，在.storybook/main.js里添加静态资源配置：

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  staticDirs: ['../dist'], // 把dist目录设为静态资源目录
};

按照这些步骤操作，你就能在本地直接运行Storybook预览Stencil组件，完全不用发布到NPM。如果还有具体的报错信息（比如复制时的路径找不到、权限错误），可以再针对性排查，但这些步骤应该能解决你当前的核心问题。

内容的提问来源于stack exchange，提问作者César Alberca