编译器支持

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 配置的单体仓库），在项目当前工作目录中创建 .babelrc.json 文件可能不够。在这些情况下，您可以创建 babel.config.js 文件来覆盖 Babel 的配置，Storybook 将自动检测并使用它。有关更多信息，请参阅 Babel 文档。

使用 Create React App

如果您正在使用通过 Create React App 初始化的项目，Storybook 将自动检测并使用该工具提供的 Babel 配置（通过 @storybook/preset-create-react-app 预设启用），允许您在无需任何额外配置的情况下使用 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

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