核心
类型
{
builder?: string | { name: string; options?: BuilderOptions };
channelOptions?: ChannelOptions;
crossOriginIsolated?: boolean;
disableProjectJson?: boolean;
disableTelemetry?: boolean;
disableWebpackDefaults?: boolean;
disableWhatsNewNotifications?: boolean;
enableCrashReports?: boolean;
renderer?: RendererName;
}
配置 Storybook 的内部功能。
builder
类型
| '@storybook/builder-vite' | '@storybook/builder-webpack5'
| {
name: '@storybook/builder-vite' | '@storybook/builder-webpack5';
options?: BuilderOptions;
}
配置 Storybook 的构建器,Vite 或 Webpack。
使用新的框架 API,framework.options.builder
现在是配置构建器的首选方式。
只有当你需要配置一个不属于框架的构建器时,才应该使用 core.builder.options
。
.storybook/main.ts
// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
import type { StorybookConfig } from '@storybook/your-framework';
const config: StorybookConfig = {
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
framework: '@storybook/your-framework',
core: {
builder: {
name: '@storybook/builder-vite',
options: {
viteConfigPath: '../../../vite.config.js',
},
},
},
};
export default config;
channelOptions
类型:ChannelOptions
{
allowDate: boolean;
allowRegExp: boolean;
allowSymbol: boolean;
allowUndefined: boolean;
maxDepth: number;
space: number | undefined;
}
配置 Storybook 用于管理器和预览之间通信的通道。
可能只会用到两个属性
channelOptions.maxDepth
类型:number
默认:3
通过通道序列化的嵌套对象的最大深度。值越大,速度越慢。
crossOriginIsolated
类型:boolean
启用 CORS 头部以在“安全上下文”中运行文档。参见SharedArrayBuffer 安全要求
这将在开发模式下启用这些头部
Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp
.storybook/main.ts
// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
import type { StorybookConfig } from '@storybook/your-framework';
const config: StorybookConfig = {
framework: '@storybook/your-framework',
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
core: {
crossOriginIsolated: true,
},
};
export default config;
disableProjectJson
类型:boolean
禁用 project.json
的生成,这是一个包含 Storybook 元数据的文件。
.storybook/main.ts
// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
import type { StorybookConfig } from '@storybook/your-framework';
const config: StorybookConfig = {
framework: '@storybook/your-framework',
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
core: {
disableProjectJson: true,
},
};
export default config;
disableTelemetry
类型:boolean
禁用 Storybook 的遥测数据收集。
.storybook/main.ts
// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
import type { StorybookConfig } from '@storybook/your-framework';
const config: StorybookConfig = {
framework: '@storybook/your-framework',
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
core: {
disableTelemetry: true,
},
};
export default config;
disableWebpackDefaults
类型:boolean
禁用 Storybook 的默认 Webpack 配置。
.storybook/main.ts
// Replace your-framework with the framework you are using, e.g. react-webpack5, nextjs, angular, etc.
import type { StorybookConfig } from '@storybook/your-framework';
const config: StorybookConfig = {
framework: '@storybook/your-framework',
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
core: {
disableWebpackDefaults: true,
},
};
export default config;
disableWhatsNewNotifications
类型:boolean
禁用 Storybook 新版本和生态系统更新(如插件、内容等)在用户界面中的“新功能”通知。
.storybook/main.ts
// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
import type { StorybookConfig } from '@storybook/your-framework';
const config: StorybookConfig = {
framework: '@storybook/your-framework',
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
core: {
disableWhatsNewNotifications: true,
},
};
export default config;
enableCrashReports
类型:boolean
启用向 Storybook 遥测发送崩溃报告。
.storybook/main.ts
// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
import type { StorybookConfig } from '@storybook/your-framework';
const config: StorybookConfig = {
framework: '@storybook/your-framework',
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
core: {
enableCrashReports: true, // 👈 Appends the crash reports to the telemetry events
},
};
export default config;
renderer
类型:RendererName