Docs
Storybook Docs

core

父级:main.js|ts 配置

¥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 的构建器,ViteWebpack

¥Configures Storybook's builder, Vite or Webpack.

使用新的 框架 APIframework.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.

.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)'],
  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

.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)'],
  core: {
    crossOriginIsolated: true,
  },
};
 
export default config;

disableProjectJson

类型:boolean

¥Type: boolean

禁用生成 project.json,这是一个包含 Storybook 元数据的文件

¥Disables the generation of project.json, a file containing Storybook metadata

.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)'],
  core: {
    disableProjectJson: true,
  },
};
 
export default config;

disableTelemetry

类型:boolean

¥Type: boolean

禁用 Storybook 的 遥测收集

¥Disables Storybook's telemetry collection.

.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)'],
  core: {
    disableTelemetry: true,
  },
};
 
export default config;

disableWebpackDefaults

类型:boolean

¥Type: boolean

禁用 Storybook 的默认 Webpack 配置。

¥Disables Storybook's default Webpack configuration.

.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)'],
  core: {
    disableWebpackDefaults: true,
  },
};
 
export default config;

disableWhatsNewNotifications

类型:boolean

¥Type: boolean

禁用 UI 中针对新 Storybook 版本和生态系统更新(例如 addonscontent 等)的 "新功能" 通知。

¥Disables the "What's New" notifications in the UI for new Storybook versions and ecosystem updates (e.g., addons, content, etc.).

.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)'],
  core: {
    disableWhatsNewNotifications: true,
  },
};
 
export default config;

enableCrashReports

类型:boolean

¥Type: boolean

启用崩溃报告以发送到 Storybook telemetry

¥Enable crash reports to be sent to Storybook telemetry.

.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)'],
  core: {
    enableCrashReports: true, // 👈 Appends the crash reports to the telemetry events
  },
};
 
export default config;

renderer

类型:RendererName

¥Type: RendererName