编译器支持

JavaScript 编译器对于优化和转换代码、提升性能并确保跨不同环境的兼容性至关重要。Storybook 支持主要的编译器，通过 SWC 确保闪电般的构建时间和执行速度，或者利用拥有丰富插件和预设生态系统的 Babel，让您能够在基于 Webpack 的项目中使用生态系统中的最新特性，只需极少的配置。

SWC

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

ℹ️ 对 Next.js 项目的 SWC 构建器支持目前处于实验阶段，默认未启用。您需要选择启用它。有关使用受支持框架配置 SWC 的更多信息，请参阅 SWC API 文档。

Babel

Babel 是一款广泛采用的 JavaScript 编译器，提供模块化架构和丰富的插件系统，以支持广泛的使用场景，让您能够使用工具生态系统的前沿特性。Storybook 与 Babel 提供了无缝集成，让您可以在项目和 Storybook 之间共享标准设置，无需任何额外配置。

如果您未使用 Storybook 7，请参阅以前的文档，获取有关配置 Babel 设置的指南。

配置

默认情况下，Babel 提供了一套适合大多数项目的、具有主观倾向的配置，它依赖两种不同的方法来配置项目：

项目范围配置：Babel 会在您的项目根目录下查找 babel.config.js 或等效文件，并使用它来配置项目的 Babel 设置。
文件相对配置：Babel 会查找 .babelrc.json 或等效文件，深入检查项目结构直到找到配置文件。这允许您为项目的多个方面分别配置 Babel。

Storybook 依赖于一种与具体项目无关的 Babel 配置方法，使您能够为项目提供必要的配置，Storybook 将使用该配置。根据受支持的框架、构建器和插件，Storybook 可能会进行微调，以确保与 Storybook 功能的兼容性。

对于自定义项目配置，例如包含多个 Storybook 配置的 monorepos（单体仓库），在项目当前工作目录中创建 .babelrc.json 文件可能不足够。在这种情况下，您可以创建 babel.config.js 文件来覆盖 Babel 的配置，Storybook 会自动检测并使用它。有关更多信息，请参阅 Babel 文档。

使用 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 选项：

.storybook/main.ts

// 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

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