Storybook 附加组件 Codepen

只需点击一个按钮，即可在 Codepen 上打开一个笔，并预先填充您的故事的 HTML 和 CSS。

安装

在 Storybook 项目的根目录中，运行以下任一命令：

npm i -D storybook-addon-codepen

或

yarn add storybook-addon-codepen

然后，将以下内容添加到您的 .storybook/main.js 文件中

export default {
  addons: ['storybook-addon-codepen'],
};

假设和限制

此附加组件是为那些希望分享单个故事内容的情况而设计的，无论是为了寻求帮助还是为了创建一个最小的用例，但出于某种原因无法分享完整的 Storybook。附加组件不会将内容复制粘贴到其他地方，而是会提取完整的故事标题、渲染的 HTML 以及您故事中任何已定义的 <style> 标签的内容，并使用它们来预填充 Codepen 上的新笔。

• 使用此附加组件不需要 Codepen 帐户。
• 通过控件面板、URL 参数或其他方式传递给故事的 args 会正确反映在生成的笔中，前提是它们在打开笔之前发生。（如果在之后发生，则需要打开一个新笔才能查看更改。）
• JavaScript 故意没有包含在发送到 Codepen 的内容中。因为 Storybook 支持许多工具，这些工具在未压缩的情况下（就像在开发过程中一样）需要大型框架捆绑包，并且因为单个组件所需的 JavaScript 可能分布在预览 iframe 中的多个捆绑包中，因此难以有效地进行选择，所以此附加组件选择在打开笔时省略 JavaScript。如果您的故事需要交互式 JavaScript，则需要手动将其移入笔中。