build
類型: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
覆寫預設的建置時產生原始碼對應 (source map) 的行為。
.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;