环境变量
您可以在 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);
您还可以使用替换符 %STORYBOOK_X%
在自定义的 <head>
/<body>
中访问这些变量,例如:%STORYBOOK_THEME%
将变为 red
。
如果在 JavaScript 中将环境变量用作属性或值,您可能需要添加引号,因为值会被直接插入,例如:<link rel="stylesheet" href="%STORYBOOK_STYLE_URL%" />
。
使用 .env 文件
您还可以使用 .env
文件来改变 Storybook 在不同模式下的行为。例如,如果您的项目添加了一个 .env
文件,内容如下
STORYBOOK_DATA_KEY=12345
然后您可以在任何地方访问这个环境变量,甚至在您的故事中
// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
import type { Meta, StoryObj } from '@storybook/your-framework';
import { MyComponent } from './MyComponent';
const meta = {
component: MyComponent,
} satisfies Meta<typeof MyComponent>;
export default meta;
type Story = StoryObj<typeof meta>;
export const ExampleStory: Story = {
args: {
propertyA: process.env.STORYBOOK_DATA_KEY,
},
};
使用 Vite
Storybook 开箱即用地提供了 Vite 构建器,它不像 process.env
那样输出 Node.js 全局变量。要在 Storybook 中访问环境变量(例如 STORYBOOK_
, VITE_
),您可以使用 import.meta.env
。例如
// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
import type { Meta, StoryObj } from '@storybook/your-framework';
import { MyComponent } from './MyComponent';
const meta = {
component: MyComponent,
} satisfies Meta<typeof MyComponent>;
export default meta;
type Story = StoryObj<typeof meta>;
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)。例如
// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
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 加载时,它将使您能够在故事中访问这些变量,就像您使用 env
文件时一样
// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
import type { Meta, StoryObj } from '@storybook/your-framework';
import { MyComponent } from './MyComponent';
const meta = {
component: MyComponent,
} satisfies Meta<typeof MyComponent>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Default: Story = {
args: {
exampleProp: process.env.EXAMPLE_VAR,
},
};
使用环境变量选择浏览器
Storybook 允许您选择用于预览故事的浏览器。可以通过 .env
文件条目或直接在 storybook
脚本中指定。
下表列出了可用选项
浏览器 | 示例 |
---|---|
Safari | BROWSER="safari" |
Firefox | BROWSER="firefox" |
Chromium | BROWSER="chromium" |
默认情况下,Storybook 在启动过程中会打开一个新的 Chrome 窗口。如果您没有安装 Chrome,请务必包含以下任一选项,或相应地设置您的默认浏览器。
故障排除
环境变量不起作用
如果您尝试使用框架特定的环境变量(例如,VUE_APP_
),可能会遇到问题,这主要是因为 Storybook 和您的框架可能有特定的配置,并且可能无法识别和使用这些环境变量。如果您遇到类似情况,您可能需要调整您的框架配置,以确保它能够识别和使用这些环境变量。例如,如果您使用的是基于 Vite 的框架,您可以扩展配置文件并启用 envPrefix
选项。其他框架可能需要类似的方法。