如何解决在演示页面上安装和使用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文档,建议通过运行npx sb init
安装Storybook。我尝试过,但问题是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?
解决方法
看起来您最终想拥有多个源目录。 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
/ jsx
/ ts
/ tsx
demo
文件夹。
还要注意,stories
文件夹只是Storybook创建的示例文件夹,您可以放心地删除它。故事可以在TypeScript处理的任何目录中,只要它与.storybook/main.js
中指定的模式匹配即可。
您甚至可以在一个项目中拥有多个具有多个配置的Storybook,但这可能不是您想要的。为了以防万一,命令应该是start-storybook -p 6006 -c path/to/config/.storybook
如果我理解正确,那么您想构建一个组件库并为您的组件安装演示应用程序。
我认为无法在现有应用中使用Storybook。这意味着您将必须构建演示应用程序,并使用Storybook中的某些组件来显示应用程序中的案例组件。据我所知这是不可能的。可能是,但似乎很复杂,我对此一无所知。
我认为Storybook应用是(或应该是)您的演示应用。
故事书可以render mdx
个文件,因此您可以向其中添加任何内容并获得演示应用。
您可以尝试的方法:
- 将演示应用程序的内容和组件故事移动到
demo
文件夹中 - 将
Home.tsx
迁移到mdx
文件 - 更改Storybook的配置以从'/ demo`加载故事
在某种程度上,您可以change Storybook's styling和“将其制成自己的东西” ,这可以成为您的演示应用程序。
直到我发现Storybook之前,我都使用带有react-live的自制组件展示柜应用程序。可能想看看它,但我认为Storybook更好,更易于维护。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。