Storybook 8.4.7导入TS文件到MDX显示转译JS而非源码求助

方案1：添加专门处理?raw的TS文件规则 #

直接在Storybook的Webpack配置中新增优先规则，让带?raw查询的TS文件跳过Angular Ivy转译，直接用raw-loader读取原始内容：

1. 修改.storybook/main.ts的webpackFinal配置：

import type { StorybookConfig } from '@storybook/angular';

const config: StorybookConfig = {
  // 其他原有配置...
  webpackFinal: async (config) => {
    // 新增规则：优先处理带?raw参数的TS文件
    config.module.rules.unshift({
      test: /\.ts$/,
      resourceQuery: /raw/,
      use: 'raw-loader',
      exclude: /node_modules/,
    });

    // 给原有Ivy规则添加排除条件，跳过带raw查询的文件
    const ivyRule = config.module.rules.find(
      rule => rule.test instanceof RegExp && rule.test.test('.ts') && rule.use?.some((u: any) => u.loader?.includes('ivy'))
    );
    if (ivyRule) {
      ivyRule.resourceQuery = { not: [/raw/] };
    }

    return config;
  },
};

export default config;

2. 安装依赖（未安装过raw-loader的话）：

npm install raw-loader --save-dev

方案2：用Storybook自带插件自动提取源码 #

如果只是展示组件源码，无需手动导入，直接用@storybook/addon-docs的<Source>组件自动获取原始TS代码：

import { Source } from '@storybook/addon-docs';
import { MyComponent } from '../src/app/components/my.component';

<Source of={MyComponent} language="typescript" />

这个方法无需修改Webpack规则，插件会自动处理源码提取，更简洁。

方案3：直接读取文件内容（本地开发场景） #

通过Webpack配置启用Node.js文件系统模块，直接在MDX中读取源码文件：

1. 修改.storybook/main.ts：

import type { StorybookConfig } from '@storybook/angular';

const config: StorybookConfig = {
  // 其他原有配置...
  webpackFinal: async (config) => {
    config.resolve.fallback = {
      ...config.resolve.fallback,
      fs: require.resolve('fs-extra'),
    };
    return config;
  },
};

export default config;

2. 安装依赖：

npm install fs-extra --save-dev

3. 在MDX中读取并展示源码：

import fs from 'fs';
import path from 'path';

const componentSource = fs.readFileSync(path.resolve(__dirname, '../src/app/components/my.component.ts'), 'utf8');

<pre><code className="language-typescript">{componentSource}</code></pre>

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