vite-plugin-prerelease

介绍

预发布插件。插件会在网页上植入小组件，用于切换测试/预发布环境

默认预发布环境取的 production 环境变量，你可以在代码中通过 import.meta.env.PRERELEASE 来判断是否是预发布环境

此插件解决了需要新建预发布git分支、切换分支、合并代码等繁琐操作

使用方式

此插件使用非常简单，通常情况下，只需要引入插件即可，无需额外配置

``ts
import { defineConfig } from 'vite'
import { prerelease } from 'vite-plugin-prerelease'

// https://vitejs.dev/config/
export default defineConfig(() => {
return {
plugins: [
prerelease(),
]
}
})
`

就这么简单！启动项目看到左上角小组件，点击即可切换环境！

`bash
NODE_ENV=test vite build --mode test
`

import.meta.env

插件会在 import.meta.env 上注入 PRERELEASE 变量，用于判断是否是预发布环境

$3

`ts
console.log(import.meta.env.PRERELEASE)
`

小组件

用于在网页上获取和控制环境。

网页小组件已经提供了切换环境的能力了，如果不满足需求，可以使用此 API 进行自定义

$3

`ts
import { clientApi } from 'vite-plugin-prerelease/client'
`

#### isPrerelease

- 类型: boolean

是否是预发布环境

#### enablePrerelease

- 类型: () => void

切换至预发布环境

#### disablePrelease

- 类型: () => void

切换至测试环境

#### tooglePrerelease

- 类型: () => void

切换环境

初始化环境

插件支持通过浏览器url参数 prerelease 为 true/false 来初始化环境，如：http://localhost:5174?prerelease=true

配置项

以下是进阶配置，通常你不需要任何配置

$3

- 类型: string
- 默认值: runtime

插件目前支持两种模式，runtime 和 buildtime。runtime 模式下，插件会在运行时注入环境变量，buildtime 模式下，插件会在构建时生成预发布代码。

runtime 支持 CSR 和 SSR，buildtime 仅支持 CSR

$3

- 类型: string
- 默认值: production

使用此环境，用于构建预发布环境代码

$3

- 类型: string[]
- 默认值: []

需要排除的环境变量，排除之后，环境变量不再被动态修改

$3

- 类型: string

项目入口文件，默认会自动探测

$3

- 类型: PrereleaseWidgetOptions

网页小组件配置项，用于配置组件的位置、能否浮动等。

Remix / React-Router 7 服务端渲染

你还需要做一些简单的操作：

在 root 中添加以下代码：
`tsx
import server from 'vite-plugin-prerelease/server'

export function loader({ request }) {
server({
cookie: request.headers.get('Cookie'),
})

// Your code
}
`

Astro

你还需要做一些简单的操作：

在 pages/index.astro 中添加以下代码：
`tsx
import { server } from 'vite-plugin-prerelease/server'

server({
cookie: Astro.request.headers.get('Cookie')
})
`

注意事项

- 如果 NODE_ENV 是 production`，则插件不会生效，避免了在生产环境下出现预发布代码