storybook title自动追加前后缀

发表于 更新于 本文字数： 1.1k 阅读时长 ≈ 2 分钟
本文是作者对storybook title自动追加前后缀的介绍，包括storybook title自动追加前后缀的优势、实现细节、相关资料等，这些步骤可以帮助作者提高storybook title自动追加前后缀的效率。

sb搭建组件库文档还是挺方便的。当前的一个组件库，是业务组件库，title我们使用中文描述，因为中文表达更为准确，但组件名称毕竟是英文，因此希望在组件文档树上能够体现出来，这样也可以英文检索。于是需求出现了，如何自动将组件名称追加到title上呢。

解决方案

  1. 手动写，N个组件需要手动编写N次，另外如果rename组件，title需要手动维护，pass

  2. sb是否本身提供了口子，sb提供了titlePrefix，但只是解决了，某个文件夹下的title可以增加统一前缀，并不满足当前需求，pass

  3. 以上两个方案不行那就只能自行解决了，因为sb文档采用的webpack构建，且title定义语法很确定，所以决定开发webpack-loader针对stories文件统一处理解决

大致实现

@babel支持针对TSX/JSX的语法树-代码的双向转换，因此只需要读取文件，找到title修改后，再转化为代码继续执行编译打包即可

相关工具如下

  1. @babel/parser- 解析器，生成AST
  2. @babel/traverse-AST节点遍历工具
  3. @babel/generator-根据AST生成代码
  4. webpack-loader-指定文件进行转换，导出新文件

为了方便定制化title实现，loader将appendTitle设计成callback，暴露出当前title和组件name，这样使用方可以自定义实现logic。

比如这样

1
2
3
4
5
6
7
8
9
10
webpackFinal: async (config, {configType}) => {
   config.module.rules.push({
     test: /\.stories\.(jsx?$|tsx?$)/, use: [{
       loader: '@stacker/storybook-webpack-auto-title-loader', options: {
         appendTitle: ({title, componentName}) => `${title}-${componentName}`
       }
     }], include: path.resolve(__dirname, '../src'),
   });
   return config;
 }

插件下载地址：戳这里

写在最后

有了该插件，title就可以自定义控制了。