vite-plugin-environment: vite 环境里的env管理

项目主页: https://github.com/afeiship/vite-packages

更简单的使用

自己的本地脚手架，一键生成。

yo nx:vite-env

功能

• 可以在 process.env 里取得 .env 里字义的变量
• 可以不区分大小写方式调用
• 可以将 boolean/number 类型尝试转换

安装

yarn add --dev @jswork/vite-plugin-environment
yarn add @jswork/vite-envs

配置

• vite.config.ts
• config/envs
• app/boostrap.ts

vite.config.ts 基本配置

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import environmentPlugin from '@jswork/vite-plugin-environment';

// https://vitejs.dev/config/
export default defineConfig({
  envDir: 'config/environments',
  plugins: [react(), environmentPlugin({ prefix: 'VITE_' })]
});

config/envs 文件列表

config
└── environments
    ├── .env
    ├── .env.beta
    └── .env.production

bootstrap.ts

import ViteEnvs from '@jswork/vite-envs';

// 这一行必不可少
ViteEnvs.setOptions({ env: process.env });

添加 types

可以直接添加到  src/vite-env.d.ts 里

已经将 nx.$env 注入到系统中

/// <reference types="@jswork/env-manager/dist/@types" />

API使用

nx.$env()

nx.$env('api_url')

参考

• https://js.work/posts/bc6f895671a09