NodeNext模块解析下，Rollup、TS与Storybook React-Webpack5协同配置咨询

一、TypeScript配置调整 #

先把tsconfig.json核心配置拉到位，让TS既满足NodeNext的扩展名强制要求，又能正确映射.ts源文件：

{
  "compilerOptions": {
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "target": "ES2020",
    "allowJs": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "strict": true,
    // 允许在TS文件里直接导入带.ts扩展名的文件，TS类型检查会自动处理
    "allowImportingTsExtensions": true,
    // 指定TS需要解析的文件扩展名顺序
    "resolveExtensions": [".ts", ".tsx", ".js", ".jsx", ".json"],
    "outDir": "./dist"
  },
  "include": ["src/**/*", ".storybook/**/*"]
}

如果不想用allowImportingTsExtensions，坚持写.js导入，只要resolveExtensions包含.ts，TS也能自动找到对应的源文件做类型检查。

二、Rollup配置适配 #

让Rollup正确解析带.js扩展名的导入，映射到实际.ts源文件，同时输出正确格式的产物：

1. 安装依赖插件：@rollup/plugin-typescript、@rollup/plugin-node-resolve、@rollup/plugin-commonjs
2. 修改rollup.config.js：

import typescript from '@rollup/plugin-typescript';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';

export default {
  input: 'src/index.ts',
  output: [
    {
      dir: 'dist',
      format: 'esm',
      preserveModules: true,
      preserveModulesRoot: 'src'
    }
  ],
  plugins: [
    resolve({
      // 让Rollup优先解析TS扩展名的文件
      extensions: ['.ts', '.tsx', '.js', '.jsx']
    }),
    commonjs(),
    typescript({
      tsconfig: './tsconfig.json',
      allowImportingTsExtensions: true,
      noEmitOnError: true
    })
  ]
};

preserveModules和preserveModulesRoot能保持源文件目录结构，避免打包后扩展名混乱。

三、Storybook Webpack5配置修改 #

核心是让Webpack遇到.js导入时，自动尝试匹配.ts/.tsx文件，修改.storybook/main.js：

/** @type { import('@storybook/react-webpack5').StorybookConfig } */
const config = {
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  framework: {
    name: '@storybook/react-webpack5',
    options: {}
  },
  webpackFinal: async (config) => {
    // 调整扩展名解析顺序，优先找TS文件
    config.resolve.extensions = ['.ts', '.tsx', '.js', '.jsx', '.json'];
    
    // 添加TS loader处理源文件
    config.module.rules.push({
      test: /\.(ts|tsx)$/,
      use: [
        {
          loader: 'ts-loader',
          options: {
            transpileOnly: true,
            configFile: '../tsconfig.json'
          }
        }
      ],
      exclude: /node_modules/
    });

    return config;
  }
};

export default config;

调整resolve.extensions顺序后，Webpack遇到../colors.js的导入时，会先去查找../colors.ts并正确解析。

四、额外注意事项 #

• 所有故事文件也要遵循NodeNext导入规则，要么写.ts扩展名，要么依赖上述配置解析.js导入。
• 确保TS版本与Rollup的TS插件版本兼容，避免解析冲突。
• 测试时按tsc --noEmit（类型检查）→ Rollup打包 → 启动Storybook的顺序逐步验证。

内容的提问来源于stack exchange，提问作者geoffrey