使用 Storybook 解决组件中的绝对/别名导入答案

【问题标题】：Resolve Absolute / Alias Imports in Components with Storybook使用 Storybook 解决组件中的绝对/别名导入
【发布时间】：2020-06-23 08:01:52
【问题描述】：

我使用gatsby-plugin-alias-imports 能够像这样进行绝对导入：import { colors } from "@styles/theme"; 这是在gatsby-config 中设置的。现在我刚刚将故事书添加到我的项目中。由于故事书没有通过 gatsby 运行，因此别名导入无法解析，并且出现错误：

./src/components/Button/index.js 中的错误模块未找到：错误：无法解析...中的“@styles/theme”

这是有道理的。 Storybook 不知道如何处理 @styles... - 但我该如何解决这个问题？

【问题讨论】：

标签： javascript reactjs webpack gatsby storybook

【解决方案1】：

您需要通过将 ./src 添加到 resolutions 数组来配置 Storybook 的 Webpack 以遵循相同的指令。在您的 .storybook/webpack.config.js 文件中，将其添加到要导出的函数的主体中（假设您要从第一个参数中解构 config）：

config.resolve.modules = [
  path.resolve(__dirname, "..", "src"),
  "node_modules",
]

完成后，您的 webpack.config.js 文件应如下所示：

const path = require("path")

module.exports = ({ config }) => {
  // a bunch of other rules here

  config.resolve.modules = [
    path.resolve(__dirname, "..", "src"),
    "node_modules",
  ]

  // Alternately, for an alias:
  config.resolve.alias = {
    "@styles": path.resolve(__dirname, "..", "src", "styles")
  }

  return config
}

【讨论】：

非常感谢，但我不明白这会让 webpack 知道@styles 指向哪里？另外，@styles 可能不指向src/styles，而是指向完全不同的路径？还是我在这里误解了你的答案？
@R.Kohlisch 您只需将src 更新为@styles 的路径。或者，您可以以相同的方式定义别名。 Documentation for that is here.

【解决方案2】：

您似乎需要为故事书创建自定义 babel 配置。包括你的gatsby-plugin-alias-imports 配置

https://storybook.js.org/docs/configurations/custom-babel-config/

【讨论】：

【解决方案3】：

您很有可能在这里找到解决方案。

在 webpack 配置中解析别名：https://github.com/storybookjs/storybook/issues/3339

【讨论】：

【解决方案4】：

您需要告诉故事书的 webpack 配置来解析您在 tsconfig.json 文件中设置的路径别名。

在您的.storybook/main.js 文件中，您需要添加以下内容。

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin')

module.exports = {
    "webpackFinal": async config => {
        config.resolve.plugins.push(new TsconfigPathsPlugin())
        return config
    }
}

这会将tsconfig-paths-webpack-plugin 包添加到storybook webpack 配置的解析插件中，并使用您的tsconfig.json 来解析路径别名。

这也是在任何 webpack 配置文件中完成的确切方式。我已经处理了很多使路径别名起作用的问题，这是绝对最简单的方法，并且每次都可以使用。

【讨论】：