编译器支持

JavaScript 编译器在优化和转换代码、提升性能以及确保跨不同环境的兼容性方面至关重要。Storybook 支持领先的编译器，确保使用 SWC 获得闪电般的构建速度和执行效率，或利用 Babel 及其广泛的插件和预设生态系统，让您能够使用最新功能，而无需对基于 Webpack 的项目进行大量配置。

SWC

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

Babel

Babel 是一款广泛采用的 JavaScript 编译器，提供模块化架构和广泛的插件系统，可支持各种用例，让您能够访问最新的工具链生态系统功能。Storybook 与 Babel 无缝集成，让您可以与 Storybook 共享标准设置，无需额外配置。

配置

默认情况下，Babel 提供了一个适合大多数项目的标准配置，它依靠两种不同的方法来配置项目：

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

Storybook 采用独立于框架的方法来配置 Babel，允许您提供项目所需的配置，并且 Storybook 会使用它。根据支持的框架、构建器和插件，它可能会进行一些微调以确保与 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 来解决此问题。