環境變數

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

STORYBOOK_THEME=red STORYBOOK_DATA_KEY=12345 npm run storybook

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

然後，我們可以像下面這樣在預覽 JavaScript 程式碼中的任何位置存取這些環境變數

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

您也可以在自訂的 <head>/<body> 中使用替換 %STORYBOOK_X% 來存取這些變數，例如：%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 建置工具，它不會輸出像 process.env 這樣的 Node.js 全域變數。若要在 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 選項。其他框架可能需要類似的方法。