建置
父層: main.js|ts 設定
類型: TestBuildConfig
提供組態選項以最佳化 Storybook 的生產建置輸出。
test
類型: TestBuildFlags
{
disableBlocks?: boolean;
disabledAddons?: string[];
disableMDXEntries?: boolean;
disableAutoDocs?: boolean;
disableDocgen?: boolean;
disableSourcemaps?: boolean;
disableTreeShaking?: boolean;
}
為了效能測試目的,停用建置中的特定功能,以設定 Storybook 的生產建置。當執行 build-storybook
時,透過設定 --test
標記 即可啟用此功能。
當 `--test` 標記提供給 storybook build
命令時,此頁面上記錄的選項會自動啟用。我們建議您僅在需要為您的專案停用特定功能,或是在偵錯建置問題時,才覆寫這些選項。
test.disableBlocks
類型: boolean
從建置中排除 @storybook/blocks
套件,此套件會使用文件區塊產生自動文件。
.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)'],
build: {
test: {
disableBlocks: false,
},
},
};
export default config;
test.disabledAddons
類型: string[]
設定將在建置輸出中停用的附加元件列表。
.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', '@storybook/addon-interactions', '@storybook/addon-a11y'],
build: {
test: {
disabledAddons: ['@storybook/addon-a11y'],
},
},
};
export default config;
test.disableMDXEntries
類型: boolean
啟用此選項會從建置中移除使用者撰寫的 MDX 格式文件條目。
.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)'],
build: {
test: {
disableMDXEntries: false,
},
},
};
export default config;
test.disableAutoDocs
類型: boolean
防止使用自動文件功能產生的自動文件包含在建置中。
.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)'],
build: {
test: {
disableAutoDocs: false,
},
},
};
export default config;
test.disableDocgen
類型: boolean
停用自動 argType 和元件屬性推斷,使用任何基於您正在使用的框架的受支援靜態分析工具。
.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)'],
build: {
test: {
disableDocgen: false,
},
},
};
export default config;
test.disableSourcemaps
類型: boolean
覆寫預設行為,即為建置產生來源地圖。
.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)'],
build: {
test: {
disableSourcemaps: false,
},
},
};
export default config;
test.disableTreeShaking
類型: boolean
在建置中停用 tree shaking。
.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)'],
build: {
test: {
disableTreeShaking: false,
},
},
};
export default config;