如何配置Storybook以支持TypeScript/ESM模块的Mock导入？

安全阿岳

2026-8-19

Storybook TypeScript/ESM环境下模块Mock配置修复方案

问题根源

TypeScript静态检查阶段不会读取webpack的别名配置，单纯设置resolve.alias只会让webpack编译时生效，但TS编译器会因为找不到对应的类型映射抛出错误；同时ESM模块的解析逻辑与CJS不同，需要额外调整路径处理方式。

分步修复方案

1. 更新webpackFinal配置

修改.storybook/main.js（或main.ts）中的webpack配置，确保覆盖TS扩展名解析，同时明确指定Mock模块的路径：

module.exports = {
  webpackFinal: (config) => {
    // 映射目标模块到Mock文件，指定TS扩展名
    config.resolve.alias['moduleToMock'] = require.resolve('../src/mocks/mockModule.ts');
    // 添加TS扩展名到webpack解析列表
    config.resolve.extensions = [...config.resolve.extensions, '.ts', '.tsx'];
    return config;
  },
};

2. 配置TypeScript路径映射

在项目的tsconfig.json（如果Storybook有独立的.storybook/tsconfig.json则用这个）中添加paths，让TS编译器识别别名：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "moduleToMock": ["./src/mocks/mockModule.ts"]
    }
  }
}

注意baseUrl必须设置，否则paths无法正常工作。

3. ESM专属适配（如果项目启用ESM）

如果你的package.json中设置了"type": "module"，需要改用ESM风格的路径处理：

export default {
  webpackFinal: (config) => {
    config.resolve.alias['moduleToMock'] = new URL('../src/mocks/mockModule.ts', import.meta.url).pathname;
    config.resolve.extensions = [...config.resolve.extensions, '.ts', '.tsx'];
    // 关闭强制扩展名要求，适配ESM导入习惯
    config.resolve.enforceExtension = false;
    return config;
  },
};