关于组件库:Storybook使用过程遇到的一些问题

75次阅读

共计 1478 个字符，预计需要花费 4 分钟才能阅读完成。

老早就晓得 Storybook 这个用于开发组件库生成文档的工具，但始终未在生产环境实际过，上面讲一下我最近遇到的一个问题

根本介绍、装置过程暂且不谈，可去官网理解
Storybook 根底介绍中文文档、最新文档

问题：docs 文档不显示
因为我是接手的他人的我的项目，这个我的项目的 storybook 均已初始化结束，但有一个问题是 docs 菜单不显示内容，这就带来了一个问题：就是我在 storybook 找到了我须要的组件然而我却无奈间接复制只能去源码找到相应代码而后拷贝下来其过程非常苦楚繁琐

解决问题的步骤
1. 一度认为是控制台的那个报错影响的不展现，就玩命的搜寻这个报错的起因，但怎么都找不到答案，而后看到 storybook 有个 docs 的插件 -@storybook/addon-docs，装置应用也是杯水车薪，docs 菜单怎么也搞不进去
2. 而后想到初始化一个最简略的 storybook 我的项目看一看它与现有我的项目中的配置哪里不统一，而后利用 npx sb init 文档初始了一个我的项目，这里多说一句，官网文档指明 sb init 不针对一个空我的项目，而是一个曾经应用框架的我的项目
3. 而后启动发现 docs 菜单是能失常显示的，配置文件 main.js 也没有装置 @storybook/addon-docs 该插件
4. 而后我就把现有我的项目的 storybook 的配置文件 (.storybook 目录 ) 删掉，所有依赖 package.json 的货色全删掉，而后在根目录执行 npx sb init
5. 执行 yarn storybook 而后奇观产生了，docs 目录呈现了 😄😄😄，合乎预期，但因为我的项目中应用 tailwindcss，storybook 中的组件的款式全都失落了
6. 又去搜寻 storybook + react + tailwindcss 如何组合应用，找到了这篇文章解决了我的问题，docs 菜单菜单呈现了
7. 残缺的配置如下
```
// .storybook/main.js 
const path = require('path')
module.exports = {stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    '@storybook/addon-storysource', // 用于底部菜单栏呈现 story 选项
    '@storybook/preset-create-react-app',
  ],
  // tailwindcss 与 storybook 配合应用
  webpackFinal: async config => {
    config.module.rules.push({
      test: /\.css&/,
      use: [
        {
          loader: 'postcss-loader',
          options: {
            ident: 'postcss',
            plugins: [require('tailwindcss'), require('autoprefixer')],
          },
        },
      ],
      include: path.resolve(__dirname, '../'),
    })
    return config
  },

  framework: '@storybook/react',
  core: {builder: 'webpack5',},
}
```
参考文章
storybook 中文文档
基于 Storybook 5 打造 Style 组件库开发与文档站建设小结
Storybook 入门指南