编译器支持

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

¥Javascript compilers are essential in optimizing and transforming code, enhancing performance, and ensuring compatibility across different environments. Storybook provides support for the leading compilers, ensuring lightning-fast build time and execution with SWC or leveraging Babel with its extensive ecosystem of plugins and presets to allow you to use the latest features of the ecosystem with minimal configuration required for your Webpack-based project.

SWC

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

¥SWC is a fast, highly extensible tool for compiling and bundling modern JavaScript applications. Powered by Rust, it improves performance and reduces build times. Storybook includes a built-in integration with SWC, allowing zero-configuration setup and built-in types for APIs. If you've initialized Storybook in a Webpack-based project with any of the supported frameworks, except Angular, Create React App, Ember.js and Next.js, it will automatically use SWC as its default, providing you with faster loading time.

Babel

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

¥Babel is a widely adopted JavaScript compiler providing a modular architecture and extensive plugin system to support a wide range of use cases, enabling access to the cutting-edge features of the tooling ecosystem. Storybook provides a seamless integration with Babel, allowing you to share a standard setup between your project and Storybook without any additional configuration.

配置

¥Configure

默认情况下，Babel 提供了一个适用于大多数项目的固定 configuration，依靠两种不同的方法使用该工具配置项目：

¥By default, Babel provides an opinionated configuration that works for most projects, relying on two distinct methods for configuring projects with the tool:

• 项目范围配置：Babel 将在项目的根目录中查找 babel.config.js 或等效文件，并使用它来配置项目的 Babel 设置。

  ¥Project-wide configuration: Babel will look for a babel.config.js or equivalent file in the root of your project and use it to configure your project's Babel setup.

• 文件相关配置：Babel 将查找 .babelrc.json 或等效文件，检查项目结构，直到找到配置文件。这将允许你为项目的多个方面单独配置 Babel。

  ¥File-relative configuration: Babel will look for a .babelrc.json or equivalent file, introspecting the project structure until it finds a configuration file. This will allow you to configure Babel individually for multiple aspects of your project.

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

¥Storybook relies on an agnostic approach to configuring Babel, enabling you to provide the necessary configuration for your project, and it will use it. Based on the supported frameworks, builders, and addons, it may include minor adjustments to ensure compatibility with Storybook's features.

使用 Create React App

¥Working with Create React App

如果你正在使用 创建 React 应用 初始化的项目，Storybook 将自动检测并使用通过 @storybook/preset-create-react-app 预设启用的工具提供的 Babel 配置，从而无需任何额外配置即可使用 Storybook。

¥If you're working with a project that was initialized with Create React App, Storybook will automatically detect and use the Babel configuration provided by the tool enabled via the @storybook/preset-create-react-app preset, allowing to use Storybook without any additional configuration.

故障排除

¥Troubleshooting

SWC 编译器不适用于 React

¥The SWC compiler doesn't work with React

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

¥If you have enabled the SWC builder option in a React-based project and you are not explicitly importing React in your jsx|tsx files, it can cause Storybook to fail to load. SWC does not automatically import the jsx-runtime module when using the SWC builder. To resolve this issue, you need to adjust your Storybook configuration file (i.e., .storybook/main.js|ts) and configure the swc option as follows:

// 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 配置不起作用

¥Babel configuration not working

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

¥Out of the box, Storybook can detect and apply any Babel configuration you provided in your project. However, if you're running into a situation where your configuration is not being used, you configure the BABEL_SHOW_CONFIG_FOR environment variable and set it to the file you want to inspect. For example:

BABEL_SHOW_CONFIG_FOR=.storybook/preview.js yarn storybook

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

¥When the command runs, it will output the Babel configuration applied to the file you specified despite showing a transpilation error in the console and preventing Storybook from loading. This is a known issue with Babel unrelated to Storybook, which you address by turning off the environment variable after inspecting the configuration and restarting Storybook.