編譯器支援

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 會自動偵測並使用該工具提供的 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 選項設定如下

// 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 來解決此問題。