編譯器支援

Javascript 編譯器對於最佳化和轉換程式碼至關重要，可提升效能並確保跨不同環境的相容性。Storybook 提供對主要編譯器的支援，確保使用 SWC 實現閃電般的快速建置時間和執行，或利用 Babel 及其廣泛的插件和預設生態系統，讓您可以使用生態系統的最新功能，且對於基於 Webpack 的專案只需最少的設定。

SWC

SWC 是一個快速、高度可擴展的工具，用於編譯和捆綁現代 JavaScript 應用程式。由 Rust 提供支援，它提高了效能並縮短了建置時間。Storybook 包含與 SWC 的內建整合，允許零設定設定和 API 的內建類型。如果您已在基於 Webpack 的專案中使用任何受支援的框架初始化了 Storybook，但 Angular、Create React App、Ember.js 和 Next.js 除外，它將自動使用 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 來解決此問題。