core

類型

{
  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-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

{
  allowClass: boolean;
  allowDate: boolean;
  allowFunction: boolean;
  allowRegExp: boolean;
  allowSymbol: boolean;
  allowUndefined: boolean;
  lazyEval: boolean;
  maxDepth: number;
  space: number | undefined;
}

設定 Storybook 用於管理員和預覽之間通訊的通道。

可能只會使用到兩個屬性

`channelOptions.allowFunction`

類型： boolean

預設值： false

啟用跨通道序列化函數，這可能存在安全風險。

`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-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

停用 project.json 的產生，這是一個包含 Storybook 元資料的檔案

.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

停用 Storybook 的遙測資料收集。

.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

停用 Storybook 的預設 Webpack 設定。

.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

停用 UI 中關於新 Storybook 版本和生態系統更新（例如，插件、內容等）的「最新消息」通知。

.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

啟用將錯誤報告發送至 Storybook 遙測。

.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