必要的擴充功能

Storybook 的主要優勢之一是可擴展 Storybook UI 和行為的擴充功能。 Storybook 預設搭載一組「必要」擴充功能，以增強初始使用者體驗。除了 Storybook 核心團隊開發的「官方」擴充功能外，還有許多第三方擴充功能。

安裝

如果您執行 npx storybook@latest init 將 Storybook 包含在您的專案中，則最新版本的 Essentials 擴充功能 (@storybook/addon-essentials) 已為您安裝並設定完成。您可以繼續跳過本節的其餘部分。

但是，如果您打算將 Essentials 擴充功能手動安裝到現有的 Storybook 實例中，您可以透過在終端機中執行以下命令來完成

npm install @storybook/addon-essentials --save-dev

更新您的 Storybook 設定 (在 .storybook/main.js|ts 中) 以包含 Essentials 擴充功能。

.storybook/main.ts

// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
import type { StorybookConfig } from '@storybook/your-framework';
 
const config: StorybookConfig = {
  framework: '@storybook/your-framework',
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: ['@storybook/addon-essentials'], // 👈 Register addon-essentials
};
 
export default config;

設定

Essentials 是「零設定」。它隨附開箱即用的建議設定。

如果您需要重新設定任何個別的 Essentials 擴充功能，請按照安裝說明手動安裝它們，並根據選擇的方法，在您的 Storybook 設定檔 (即 .storybook/main.js|ts) 中註冊它們，並調整設定以符合您的需求。例如

npm install @storybook/addon-actions --save-dev

.storybook/main.ts

// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
import type { StorybookConfig } from '@storybook/your-framework';
 
const config: StorybookConfig = {
  framework: '@storybook/your-framework',
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-actions'],
};
 
export default config;

以下是精簡的設定和表格，其中包含每個擴充功能的所有可用選項。

.storybook/main.ts

// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
import type { StorybookConfig } from '@storybook/your-framework';
 
const config: StorybookConfig = {
  framework: '@storybook/your-framework',
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-actions',
    '@storybook/addon-viewport',
    {
      name: '@storybook/addon-docs',
      options: {
        csfPluginOptions: null,
        mdxPluginOptions: {
          mdxCompileOptions: {
            remarkPlugins: [],
          },
        },
      },
    },
    '@storybook/addon-controls',
    '@storybook/addon-backgrounds',
    '@storybook/addon-toolbars',
    '@storybook/addon-measure',
    '@storybook/addon-outline',
  ],
};
 
export default config;

擴充功能	選項	描述
`@storybook/addon-actions`	不適用	不適用
`@storybook/addon-viewport`	不適用	不適用
`@storybook/addon-docs`	`csfPluginOptions`	為 Storybook 的 CSF 外掛程式提供額外的設定。可以使用 `null` 停用。
	`mdxPluginOptions`	為 MDX 文件提供額外的設定選項和外掛程式設定。
`@storybook/addon-controls`	不適用	不適用
`@storybook/addon-backgrounds`	不適用	不適用
`@storybook/addon-toolbars`	不適用	不適用
`@storybook/addon-measure`	不適用	不適用

當您啟動 Storybook 時，您的自訂設定將覆寫預設設定。

停用擴充功能

如果您需要停用任何 Essential 的擴充功能，您可以透過變更 .storybook/main.js 檔案來完成。

例如，如果您想停用背景擴充功能，您需要將以下變更套用至您的 Storybook 設定

.storybook/main.ts

// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
import type { StorybookConfig } from '@storybook/your-framework';
 
const config: StorybookConfig = {
  framework: '@storybook/your-framework',
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: [
    {
      name: '@storybook/addon-essentials',
      options: {
        backgrounds: false, // 👈 disable the backgrounds addon
      },
    },
  ],
};
 
export default config;

您可以為每個個別的擴充功能使用以下鍵：actions、backgrounds、controls、docs、viewport、toolbars、measure、outline 和 highlight。