core
¥Parent: main.js|ts configuration
类型:
¥Type:
{
builder?: string | { name: string; options?: BuilderOptions };
channelOptions?: ChannelOptions;
crossOriginIsolated?: boolean;
disableProjectJson?: boolean;
disableTelemetry?: boolean;
disableWebpackDefaults?: boolean;
disableWhatsNewNotifications?: boolean;
enableCrashReports?: boolean;
renderer?: RendererName;
}
配置 Storybook 的内部功能。
¥Configures Storybook's internal features.
builder
类型:
¥Type:
| '@storybook/builder-vite' | '@storybook/builder-webpack5'
| {
name: '@storybook/builder-vite' | '@storybook/builder-webpack5';
options?: BuilderOptions;
}
配置 Storybook 的构建器,Vite 或 Webpack。
¥Configures Storybook's builder, Vite or Webpack.
使用新的 框架 API,framework.options.builder
现在是配置构建器的首选方式。
¥With the new Framework API, framework.options.builder
is now the preferred way to configure the builder.
如果你需要配置不属于框架的构建器,则仅应使用 core.builder.options
。
¥You should only use core.builder.options
if you need to configure a builder that is not part of a framework.
// 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)'],
core: {
builder: {
name: '@storybook/builder-vite',
options: {
viteConfigPath: '../../../vite.config.js',
},
},
},
};
export default config;
channelOptions
类型:ChannelOptions
¥Type: ChannelOptions
{
allowClass: boolean;
allowDate: boolean;
allowFunction: boolean;
allowRegExp: boolean;
allowSymbol: boolean;
allowUndefined: boolean;
lazyEval: boolean;
maxDepth: number;
space: number | undefined;
}
配置 Storybook 用于在管理器和预览之间进行通信的通道。
¥Configures the channel used by Storybook to communicate between the manager and preview.
可能只使用两个属性:
¥Only two properties are likely to be used:
channelOptions.allowFunction
类型:boolean
¥Type: boolean
默认:false
¥Default: false
启用跨通道序列化函数,这可能存在安全风险。
¥Enables serializing functions across the channel, which can be a security risk.
channelOptions.maxDepth
类型:number
¥Type: number
默认:3
¥Default: 3
要跨渠道序列化的嵌套对象的最大深度。值越大,速度越慢。
¥The maximum depth of nested objects to serialize across the channel. Larger values will be slower.
crossOriginIsolated
类型:boolean
¥Type: boolean
启用 CORS 标题以在 "安全上下文" 中运行文档。参见 SharedArrayBuffer 安全要求
¥Enable CORS headings to run document in a "secure context". See SharedArrayBuffer security requirements
这在开发模式下启用了这些标题:
¥This enables these headers in development-mode:
-
Cross-Origin-Opener-Policy: same-origin
-
Cross-Origin-Embedder-Policy: require-corp
// 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)'],
core: {
crossOriginIsolated: true,
},
};
export default config;
disableProjectJson
类型:boolean
¥Type: boolean
禁用生成 project.json
,这是一个包含 Storybook 元数据的文件
¥Disables the generation of project.json
, a file containing Storybook metadata
// 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)'],
core: {
disableProjectJson: true,
},
};
export default config;
disableTelemetry
类型:boolean
¥Type: boolean
禁用 Storybook 的 遥测收集。
¥Disables Storybook's telemetry collection.
// 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)'],
core: {
disableTelemetry: true,
},
};
export default config;
disableWebpackDefaults
类型:boolean
¥Type: boolean
禁用 Storybook 的默认 Webpack 配置。
¥Disables Storybook's default Webpack configuration.
// 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)'],
core: {
disableWebpackDefaults: true,
},
};
export default config;
disableWhatsNewNotifications
类型:boolean
¥Type: boolean
禁用 UI 中针对新 Storybook 版本和生态系统更新(例如 addons、content 等)的 "新功能" 通知。
¥Disables the "What's New" notifications in the UI for new Storybook versions and ecosystem updates (e.g., addons, content, etc.).
// 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)'],
core: {
disableWhatsNewNotifications: true,
},
};
export default config;
enableCrashReports
类型:boolean
¥Type: boolean
启用崩溃报告以发送到 Storybook telemetry。
¥Enable crash reports to be sent to Storybook telemetry.
// 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)'],
core: {
enableCrashReports: true, // 👈 Appends the crash reports to the telemetry events
},
};
export default config;
renderer
类型:RendererName
¥Type: RendererName