从头开始为 storybook 和 webpack 设置绝对导入答案

【问题标题】：Setting up absoute imports for storybook and weback from scratch从头开始为 storybook 和 webpack 设置绝对导入
【发布时间】：2021-11-02 09:22:44
【问题描述】：

我正在尝试创建一个 ui 库作为我的应用程序的单独包。为此，我从头开始设置一个包，创建一个 package.json 并在其中运行 npx storybook init。

在运行故事书时，我看到了错误日志：

字段“浏览器”不包含有效的别名配置 /Users/xxx/Code/nl/node_modules/utils/general.jsx 没有存在 .ts

utils/general 不是包，而是我尝试从绝对路径导入的文件。然而，webpack 似乎无法解决它。

我正在使用 storybooks 默认 webpack 配置，并在我的 tsconfig.json 中由 baseUrl 定义：

{
    "include": [
      "src"
    ],
    "esModuleInterop": true,
    "compilerOptions": {
      "baseUrl": "src",
      "outDir": "lib",
      "declaration": true,
      "jsx": "react",
      "esModuleInterop": true,
      "skipLibCheck": true
    }
  }

但是，这不起作用。我很想正确解决我的绝对进口问题。我很乐意为您提供任何帮助。

【问题讨论】：

标签： webpack storybook

【解决方案1】：

?（未来参考的解决方案）

module.exports = {
    stories: [
        '../src/**/*.stories.mdx',
        '../src/**/*.stories.@(js|jsx|ts|tsx)',
    ],
    addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
    typescript: {
        reactDocgen: 'react-docgen-typescript',
    },
    webpackFinal: async (config) => {
        config.resolve.modules.push(path.resolve(__dirname, '../src'));
        return config
    },
};

参考：https://github.com/storybookjs/storybook/issues/4136

【讨论】：