在开发中经常会有一些需求，根据不同的环境进行不同的操作，比如 url 的替换，dev 环境在 dev 的 url，而线上使用 prd 的环境。在titanOne design pro模块中就有这样一个环境变量IDE，我们希望区分当前业务项目所依赖的版本区分electron or web环境，方便做好封装方法的兼容性。

环境变量可在.env中配置，也可以在package.json中scripts中通过cross-env来设置(只生效当前命令)。比如：

package.json：

  1. {
  2.     "scripts": {
  3.         "start:no-mock": "cross-env MOCK=none zebra dev",
  4.         "dev": "cross-env IDE=electron zebra dev"
  5.     }
  6. }

.env：

  1. PORT=8080
  2. appName=quickstart
  3. BUILD_TYPE=M
  4. COMPATIBLE_MODE=1

config 中使用

在config/config.js中可定义define，这样可以在项目中来使用它，处理兼容性。

比如：

  1. "define": {
  2.   "process.env.TEST": 1,
  3.   "USE_COMMA": 2,
  4. }

处理在lint 中的报错

config 是 node 环境，所以可以直接用 process.env 的来直接拿到环境变量，但是在 js 的代码中,您使用 process.env可能只会获得 NODE_ENV这个在约定俗称的变量，别的变量 webpack 并不会自动帮你注入。

关于 process.env 和 NODE_ENV看这里.

这时候我们就需要使用 define,他是根据define-plugin,在 Pro 中我们也是用了这个特性,在 config 中将 node 的环境变量注入 define 配置中

  1. export default {
  2.   //some config
  3.   define: {
  4.     'process.env.IDE_ENV': process.env.IDE || 'web',
  5.   },
  6.   // ....
  7. };

使用的时候只需要如下设置，具体代码:

  1. if (process.env.IDE_ENV === 'electron') {
  2.     Eui.Vars.loginStatus = false;
  3.     Eui.Main.send('needless-login');
  4. } else {
  5.     window.location.href = '../login/index.html';
  6. }

这里需要注意的是我们不需要通过 window[‘key’]的方式来使用它，而是直接使用。具体原理可以看一下define-plugin插件的实现。

umi默认的环境变量

umi中提供了大量的默认环境变量，这些变量可以帮助我们自动一些脚手架功能。除此之外，扩展以下环境变量。

IDE_ENV

默认web，可定义当前运行环境，比如：

  1. IDE_ENV=electron

BUILD_TYPE

默认none，当定义为M时，表示定应用模式(即：项目打包独立的 *.asar)，以多应用方式加载。

  1. BUILD_TYPE=M

备注： 当前公司客户端解决方案，要求打包模式。

appName

默认app，多应用场景下，必须按项目定义，该名称与asar包名一致。

package.json中定义scripts：

  1.  "compile:asar": "asar pack dist/electron/quickstart ../dist/electron/quickstart.asar"

.env中：

  1. appName=quickstart

buildDir

默认dist,编译输出基准目录，可自定义，比如，web版本编译：

  1. "compile:source:web": "cross-env IDE=web buildDir=../dist zebra build"

EUI3_CUSTOMIZE_THEMES

默认eui3.5-customize-themes，可自定义3.5版本主题包，比如：

  1. EUI3_CUSTOMIZE_THEMES=eui3.5-xpads-themes

提示：自行在package.json中devDependencies添加@erayt/eui3.5-xpads-themes依赖。

EUI2_THEMES

默认eui2-theme，可自定义3.0版本主题包，比如：

  1. EUI2_THEMES=eui-xpads-theme

提示：自行在package.json中devDependencies添加@erayt/eui-xpads-theme依赖。

CUSTOMIZE_LOGIN_MODULE

可自定义引用登录模块，比如，引用个性化egate登录包：

CUSTOMIZE_LOGIN_MODULE=titanOne3.0-electron-login-egate-standard

备注：包名的组默认@erayt忽略，需要在devDependencies中增加依赖：

"@erayt/titanOne3.0-electron-login-egate-standard": "^4.0.1",

COMPATIBLE_MODE

默认none, 定义是否兼容3.0版本功能，比如：消息(相关方法)、jspanel、消息盒子等。
可设置

COMPATIBLE_MODE=1

来开启(基于3.0版本项目升级需开启，可参考升级到3.5版本)。

INTEGRATED_EDOC

默认none，定义是否集成edoc相关支持。可设置

INTEGRATED_EDOC=1

来开启。

环境变量代码中报错的处理方式

由于环境变量是直接使用，不会通过 window 对象的方式来使用，在 eslint 和 TypeScript 中都会报错。

eslint 中可以通过增加 globals 的配置来处理报错。代码看起来是这样的

{
 globals: {
    page: true,
  },
}

在 TypeScript 可以在typings.d.ts 中进行定义：

declare var ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION: string;