编译器支持

Javascript 编译器对于优化和转换代码、提高性能以及确保跨不同环境的兼容性至关重要。 Storybook 为领先的编译器提供支持，通过 SWC 确保闪电般的构建速度和执行速度，或者利用 Babel 及其广泛的插件和预设生态系统，让您能够使用生态系统的最新功能，而对于基于 Webpack 的项目，只需最少的配置。

SWC

SWC 是一款快速、高度可扩展的工具，用于编译和打包现代 JavaScript 应用程序。它由 Rust 驱动，可提高性能并缩短构建时间。 Storybook 内置了与 SWC 的集成，允许零配置设置和内置 API 类型。如果您已在基于 Webpack 的项目中使用任何受支持的框架（Angular、Create React App、Ember.js 和 Next.js 除外）初始化了 Storybook，它将自动使用 SWC 作为其默认设置，从而为您提供更快的加载时间。

Babel

Babel 是一款被广泛采用的 JavaScript 编译器，提供模块化架构和广泛的插件系统，以支持各种用例，从而能够访问工具生态系统的最前沿功能。 Storybook 提供了与 Babel 的无缝集成，允许您在项目和 Storybook 之间共享标准设置，而无需任何额外的配置。

配置

默认情况下，Babel 提供了一种有主见的配置，该配置适用于大多数项目，它依赖于两种不同的方法来配置使用该工具的项目

• 项目范围配置：Babel 将在项目的根目录中查找 babel.config.js 或等效文件，并使用它来配置项目的 Babel 设置。
• 文件相对配置：Babel 将查找 .babelrc.json 或等效文件，内省项目结构，直到找到配置文件。这将允许您为项目的多个方面单独配置 Babel。

Storybook 依赖于配置 Babel 的不可知方法，使您能够为项目提供必要的配置，它将使用该配置。根据受支持的框架、构建器和插件，它可能包括细微的调整，以确保与 Storybook 的功能兼容。

使用 Create React App

如果您正在处理使用 Create React App初始化的项目，Storybook 将自动检测并使用该工具通过 @storybook/preset-create-react-app 预设提供的 Babel 配置，从而允许您在无需任何额外配置的情况下使用 Storybook。

故障排除

SWC 编译器不适用于 React

如果您在基于 React 的项目中启用了 SWC 构建器选项，并且您没有在 jsx|tsx 文件中显式导入 React，则可能会导致 Storybook 加载失败。当使用 SWC 构建器时，SWC 不会自动导入 jsx-runtime 模块。要解决此问题，您需要调整 Storybook 配置文件（即 .storybook/main.js|ts），并将 swc 选项配置如下

// Replace your-framework with the webpack-based framework you are using (e.g., react-webpack5)
import type { StorybookConfig } from '@storybook/your-framework';
 
const config: StorybookConfig = {
  framework: {
    name: '@storybook/your-framework',
    options: {},
  },
  swc: (config, options) => ({
    jsc: {
      transform: {
        react: {
          runtime: 'automatic',
        },
      },
    },
  }),
};
 
export default config;

Babel 配置不起作用

开箱即用，Storybook 可以检测并应用您在项目中提供的任何 Babel 配置。但是，如果您遇到配置未被使用的情况，您可以配置 BABEL_SHOW_CONFIG_FOR 环境变量，并将其设置为您要检查的文件。例如

BABEL_SHOW_CONFIG_FOR=.storybook/preview.js yarn storybook

当命令运行时，它将输出应用于您指定文件的 Babel 配置，尽管在控制台中显示转译错误并阻止 Storybook 加载。这是 Babel 的一个已知问题，与 Storybook 无关，您可以通过在检查配置后关闭环境变量并重新启动 Storybook 来解决此问题。