@ctsx/appenv

通过管理环境变量，控制打包工具输出不同的应用版本，比如不同版本的应用服务地址，登录方式，主题差异等。

功能支持

• ✔ typescript
• ✔ webpack 环境变量管理
• ✔ rollup 环境变量管理
• ✔ 分层多优先级环境变量控制

配置

安装

npm install @ctsx/appenv

创建类型声明文件

// appenv.d.ts
import '@ctsx/appenv';

declare global {
  /**
   *  @description  核心的构建环境变量
   */
  export interface CoreEnv {
    // ..
  }

  /**
   * @description  可配置的构建环境变量
   */
  export interface PkgEnv {
    // ..
  }

  /**
   *  @description  扩展环境变量
   */
  export interface ExtendEnv {
    // ..
  }
}

打包工具输出环境变量

webpack

import { DefinePlugin } from 'webpack';
const config = {
  plugins: [
    // 通过 DefinePlugin 在 app 环境中注入 BUILD_ENV
    new DefinePlugin({
      BUILD_ENV: JSON.stringify({
        // CoreEnv (核心配置项)
        mode: this.mode,
        built: Date.now(),

        // PkgEnv（打包配置项）
        type: this.type,
        title: this.title,
        prefixCls: this.prefixCls,
        publicPath: this.publicPath,

        // ExtendEnv（扩展配置项）
        ...this.env,
      }),
    }),
  ],
};

rollup

import replace from '@rollup/plugin-replace';
const config = {
  plugins: [
    // 通过 replace 插件注入 BUILD_ENV
    replace({
      preventAssignment: true,
      values: {
        'process.env.NODE_ENV': "'development'",
        BUILD_ENV: JSON.stringify({
          // CoreEnv
          // PkgEnv
          // ExtendEnv
        }),
      },
    }),
  ],
};

通过 create 方法覆盖 BUILD_ENV

打包工具默认注入的环境变量BUILD_ENV，有时候存在被重写的需求

// config.ts
import { create } from '@ctsx/appenv';
const appenv = create({
  // PkgEnv
  // ExtendEnv
  // 这里传入配置项修改BUILD_ENV中的环境变量
});

export default appenv;

使用环境变量

import appenv from './config';

// appenv.mode
// appenv.type

挂载宿主服务器环境变量

通过配置宿主机的环境变量，达到覆盖 appenv 中的配置

宿主机中挂载 env.js 并在最顶部引入

// env.js

window.HOST_ENV = {
  // PkgEnv
  // ExtendEnv
  // 这里传入的环境变量会以最高优先级覆盖所有的环境变量
};

通过create方法，依次装载BUILD_ENV，CONFIG_ENV，HOST_ENV，最终生成appenv，appenv包含完整的合并后的环境变量，应用在任何地方通过import appenv from './config'来使用 appenv

使用案例

import appenv from './config';

// 根据type的值设置不同的接口服务地址
const API_BASE = appenv.type === 'dev' ? 'url1' : 'url2';