環境變數

您可以在 Storybook 中使用環境變數，以便在不同的「模式」中變更其行為。如果您提供以 STORYBOOK_ 為字首的環境變數，則在使用 Webpack 時，它將在 process.env 中可用；或者在使用 Vite 建置器時，它將在 import.meta.env 中可用。

STORYBOOK_THEME=red STORYBOOK_DATA_KEY=12345 npm run storybook

請勿將任何機密資訊（例如，私密 API 金鑰）或其他類型的敏感資訊儲存在 Storybook 中。環境變數會嵌入到組建中，這表示任何人都可以透過檢查您的檔案來檢視它們。

然後，我們可以在預覽 JavaScript 程式碼中的任何地方存取這些環境變數，如下所示

console.log(process.env.STORYBOOK_THEME);
console.log(process.env.STORYBOOK_DATA_KEY);

您也可以使用替代 %STORYBOOK_X% 在自訂 <head>/<body> 中存取這些變數，例如：%STORYBOOK_THEME% 將會變成 red。

如果在 JavaScript 中將環境變數作為屬性或值使用，您可能需要新增引號，因為值將直接插入，例如：<link rel="stylesheet" href="%STORYBOOK_STYLE_URL%" />。

使用 .env 檔案

您也可以使用 .env 檔案來變更 Storybook 在不同模式中的行為。例如，如果您將 .env 檔案新增至您的專案，並包含以下內容

STORYBOOK_DATA_KEY=12345

然後，您可以在任何地方（甚至是您的 stories 內）存取此環境變數

MyComponent.stories.ts|tsx

// Replace your-framework with the name of your framework
import type { Meta, StoryObj } from '@storybook/your-framework';
 
import { MyComponent } from './MyComponent';
 
const meta: Meta<typeof MyComponent> = {
  component: MyComponent,
};
 
export default meta;
type Story = StoryObj<typeof MyComponent>;
 
export const ExampleStory: Story = {
  args: {
    propertyA: process.env.STORYBOOK_DATA_KEY,
  },
};

使用 Vite

Storybook 提供現成的 Vite 建置器，其不會輸出 Node.js 全域變數，例如 process.env。若要在 Storybook 中存取環境變數（例如，STORYBOOK_、VITE_），您可以使用 import.meta.env。例如

MyComponent.stories.ts|tsx

// Replace your-framework with the name of your framework
import type { Meta, StoryObj } from '@storybook/your-framework';
 
import { MyComponent } from './MyComponent';
 
const meta: Meta<typeof MyComponent> = {
  component: MyComponent,
};
 
export default meta;
type Story = StoryObj<typeof MyComponent>;
 
export const ExampleStory: Story = {
  args: {
    propertyA: import.meta.env.STORYBOOK_DATA_KEY,
    propertyB: import.meta.env.VITE_CUSTOM_VAR,
  },
};

您也可以針對特定模式使用特定檔案。新增 .env.development 或 .env.production，以將不同的值套用至您的環境變數。

您也可以在您使用 build-storybook 建置您的 Storybook 時，傳遞這些環境變數。

然後，它們將會硬式編碼到您 Storybook 的靜態版本。

使用 Storybook 設定

此外，您可以擴充您的 Storybook 設定檔（即 .storybook/main.js|.ts），並提供設定欄位，以便您用來定義特定的變數（例如，API URL）。例如

.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)'],
  /*
   * 👇 The `config` argument contains all the other existing environment variables.
   * Either configured in an `.env` file or configured on the command line.
   */
  env: (config) => ({
    ...config,
    EXAMPLE_VAR: 'An environment variable configured in Storybook',
  }),
};
 
export default config;

當 Storybook 載入時，它會讓您能夠在 stories 中存取它們，方式與您使用 env 檔案的方式類似

MyComponent.stories.ts|tsx

// Replace your-framework with the name of your framework
import type { Meta, StoryObj } from '@storybook/your-framework';
 
import { MyComponent } from './MyComponent';
 
const meta: Meta<typeof MyComponent> = {
  component: MyComponent,
};
 
export default meta;
type Story = StoryObj<typeof MyComponent>;
 
export const Default: Story = {
  args: {
    exampleProp: process.env.EXAMPLE_VAR,
  },
};

使用環境變數來選擇瀏覽器

Storybook 可讓您選擇要用來預覽 stories 的瀏覽器。您可以透過 .env 檔案項目，或直接在您的 storybook 指令碼中進行選擇。

下表列出可用的選項

瀏覽器	範例
Safari	`BROWSER="safari"`
Firefox	`BROWSER="firefox"`
Chromium	`BROWSER="chromium"`

預設情況下，Storybook 會開啟新的 Chrome 視窗作為其啟動程序的一部分。如果您沒有安裝 Chrome，請務必包含下列其中一個選項，或據此設定您的預設瀏覽器。

疑難排解

環境變數無法運作

如果您嘗試使用特定框架的環境變數（例如，VUE_APP_），您可能會遇到問題，主要原因是 Storybook 和您的框架可能有特定的配置，可能無法識別和使用這些環境變數。如果您遇到類似的情況，您可能需要調整您的框架配置，以確保它可以識別和使用這些環境變數。例如，如果您使用的是基於 Vite 的框架，您可以擴展配置文件並啟用 envPrefix 選項。其他框架可能需要類似的方法。