如何将打字稿路径添加到故事书

Question

我有一个带有自定义 Webpack 配置的 React 应用程序。添加与 tsconfig.json 文件 compilerOptions->paths 字段匹配的 Webpack 别名后，别名被 webpack 识别。

由于 Storybook 带有内置的 Webpack 配置，Storybook 无法读取我的别名，我收到以下错误：

Module not found: Error: Can't resolve <path with typescript alias> in <some folder path>

Answer 1

在 Storybook main.js 文件中，添加以下内容：

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
module.exports = {
  ...,
  webpackFinal: async (config, { configType }) => {
       config.resolve.plugins = [new TsconfigPathsPlugin()];<-- this line
       return config;
  }

};

您可以从应用程序 package.json 文件所在的文件夹中使用以下命令安装 tsconfig-paths-webpack-plugin：

npm i tsconfig-paths-webpack-plugin -D

解决方案源自此讨论： https://github.com/storybookjs/storybook/issues/6316

如何将打字稿路径添加到故事书

How to add typescript paths to storybook

typescript

reactjs

webpack

storybook