时间戳

首页 > 解决方案 > 在演示页面中安装和使用 Storybook

reactjs - 在演示页面中安装和使用 Storybook

问题描述

我正在使用 TypeScript 创建一个个人项目。它应该是一个导出 React 组件和 TypeScript 函数的库。因此，这个想法是将来在 npm 上发布这个库。项目中还有一个演示页面，这是我想使用 Storybook 测试 React 组件的地方。

这是项目的结构：

.
├── demo/              # demo page
│   └── Home.tsx       # where I would like to use Storybook
│   └── index.html
│   └── index.tss
│   └── style.css
├── dist/              # distributable version of app built using Parcel
├── node_modules/      # npm managed libraries
├── src/               # project source code
│   └── lib/           # folder for your library
│      └── myFuncion.ts # function to export
│      └── MyComponent.tsx # react component to export
│   └── index.ts    # app entry point (it simply contains the exports of myFunction and myComponent)
├── .eslintrc.js
├── .gitignore
├── package.json
├── tsconfig.json
├── ...

我已阅读 Storybook 文档，它建议通过运行来安装 Storybook npx sb init。我试过了，但问题是stories放在项目 src 目录中，而不是在演示页面中：

.
├── demo/              # demo page
│   └── Home.tsx       # where I would like to use Storybook
│   └── index.html
│   └── index.tss
│   └── style.css
├── dist/              # distributable version of app built using Parcel
├── node_modules/      # npm managed libraries
├── src/               # project source code
│   └── lib/           # folder for your library
│      └── myFuncion.ts # function to export
│      └── MyComponent.tsx # react component to export
│   └── stories/    # Storybook <<---
│   └── index.ts    # app entry point (it simply contains the exports of myFunction and myComponent)
├── .eslintrc.js
├── .gitignore
├── package.json
├── tsconfig.json
├── ...

创建的故事书脚本是这样的：

"scripts": {
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
},

但我想要类似的东西：

"scripts": {
    "storybook:demo": "start-storybook -p 6006",
    "build-storybook:demo": "build-storybook"
},

那么我怎样才能只在演示页面上安装和使用 Storybook？

标签： reactjstypescriptstorybook

解决方案

看起来您最终要尝试拥有多个源目录。TypeScript 和 Storybook 都支持这一点，它只需要一些配置。

tsconfig.json应该将include选项设置为：

"include": [ "src", "demo" ]

这告诉 TypeScript（或其 Babel 加载器）在src和中编译文件demo。

.storybook/main.js应该将stories选项设置为：

stories: [
  '../demo/**/*.stories.mdx',
  '../demo/**/*.stories.@(js|jsx|ts|tsx)',
],

这指定了哪些文件应该被解释为故事，在我们的例子中，它将从文件夹中*.stories.mdx递归地加载js//// 。jsxtstsxdemo

另请注意，该stories文件夹只是 Storybook 创建的示例文件夹，您可以安全地删除它。故事可以在 TypeScript 处理的任何目录中，只要它与.storybook/main.js.

您甚至可以在一个项目中拥有多个具有多个配置的故事书，但这可能不是您所追求的。不过，以防万一，命令将是start-storybook -p 6006 -c path/to/config/.storybook

推荐阅读