【Typescript】cra使用storybook并支持typescript的几个坑

前言

• storybook现在已经升到5了，在配置时有几个坑记录下。

安装部分的坑

• 按官方说明，配合cra安装storybook使用命令：

npx -p @storybook/cli sb init --type react_scripts

• 这个自动安装会去拉脚本，然后使用npm去装依赖然后改配置。
• 如果，之前有使用cnpm安装的包，npm会去尝试删掉他们，这样就会出各种找不到包的报错。
• 最合适的做法就是在装storybook之前，别使用cnpm安装任何包，全部npm进行安装。这样确保没有各种奇怪的报错。
• 如果报错，删除nodemodule然后npm i安装依赖，再去执行storybook自动安装。

配置typescript的坑

• 官网文档写的很让人懵逼，一会说这么配：

webpackFinal: async config => {
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    loader: require.resolve('babel-loader'),
    options: {
      presets: [['react-app', { flow: false, typescript: true }]],
    },
  });
  config.resolve.extensions.push('.ts', '.tsx');
  return config;
},

• 下面又写这么配：

module.exports = {
webpackFinal: async config => {
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    use: [
      {
        loader: require.resolve('ts-loader'),
      },
      // Optional
      {
        loader: require.resolve('react-docgen-typescript-loader'),
      },
    ],
  });
  config.resolve.extensions.push('.ts', '.tsx');
  return config;
},
};

• 其实尼玛都不对！！！！！！！！！
• 配合cra的话，首先看一下react-scripts版本，3以上配置的应该是babel7自动可以支持ts的，如果使用cra的话，babel的ts设置就已经开启了，而storybook会去使用cra的配置，所以根本不需要去注入配置。
• storybook5版本里，只有一个配置文件，.storybook文件夹下的main.js。只需要修改里面的stories的后缀名就ok。

module.exports = {
  stories: ['../src/**/*.stories.tsx'],
  addons: [
    '@storybook/preset-create-react-app',
    '@storybook/addon-actions',
    '@storybook/addon-links',
  ]
};

• 这样就完了，不需要搞别的。
• 低版本storybook的文件夹下还有addons,config文件。同样修改config文件里的后缀。有一定可能还需要像前面文档一样，需要注入rules去处理tsx。不过现在都是用高版本就没这些事。

全局样式

• 这个文档上没写，说可以在个故事书里引入，我试了引入确实就会变为全局样式，但是这样个人觉得不太好。于是发现5版本里会去运行preview。文档。
• 所以全局样式放在preview.js里导入就能应用全局了。