一个可以管理动态环境的包 env-selector

有时候，我们多套环境，共用一套代码，由环境的URL来动态选择环境变量

项目主页: https://github.com/afeiship/env-select

背景

• 项目中根据运行时的不同的域名(或者URL参数)来区分前端的环境
  • beta: www-beta.dev.com
  • staging: www-staging.dev.com
  • production: www.dev.com
• 将 .env-cmdrc.js 作为不同环境的配置文件
• 需要继承此包里的基类，实现一个 select 方法，返回一个环境(beta/staging/production)字符串
• 为什么期望这样做：
  • 不同的环境，共用同一份 build 后的代码
  • 节省 CI/CD 资源<只要编译一次，其它环境直接cp代码就行>
  • 比如其它环境的 s3 cp 命令: aws s3 cp s3://src/site-predict-web-internal/ s3://dist/spw-test/ --recursive
  • 总结一下：上线速度快

安装

npm i -D env-cmd
npm i -S @jswork/env-select

使用

• 添加 .env-cmdrc.js 配置文件，使用 CraEnvs.set 来设置环境变量
• 实现一个自己的 Env 帮助/配置类
• 使用 CraEnvs.get()
• 添加对应的命令到 npm scripts 中：env-cmd -e envs YOUR_SCRIPT

.env-cmdrc.js 配置文件

// 1. .env-cmdrc.js
const { CraEnvs } = require('@jswork/env-select');

module.exports = CraEnvs.set({
  beta: {
    base_url: 'https://site-predict-platform.beta.saybot.net',
  },
  staging: {
    base_url: 'https://site-predict-platform.staging.saybot.net',
  },
});

实现一个自己的 Env 帮助/配置类

import { AbstractEnvSelect } from '@jswork/env-select';

class Env extends AbstractEnvSelect {
  static ENV_SELECTORS = {
    beta: 'course-assets.saybot.net',
    staging: 'course-assets.alo7.com',
  };

  /**
   * Auto select env by current url.
   * @returns {string} The target env string.
   */
  static select(): string {
    let env = 'beta';
    nx.forIn(this.ENV_SELECTORS, (key, value) => {
      if (window.location.pathname.includes(value)) {
        env = key;
        return nx.BREAKER;
      }
    });
    return env;
  }
}

在一个API中使用

import { Env } from '@/shared/helpers/env';

const options = {
  interceptors,
  transformResponse: ({ data }) => {
    return nx.get(data, 'result');
  },
};

export default httpSchema(
  {
    host: Env.get('base_url'),
    request: ['', 'json'],
    // ...其它代码
  }
);

添加命令到 scripts 中

具体是在什么命令中，这个取决于你自己的业务逻辑，我主要用在 build，发布到线上的时候。

下面的命令，可根据自己实际项目中用到的地方，添加，此工具，目前只适合于 CRA 建立的项目。

{
  // ...
  "start": "env-cmd -e envs react-scripts start",
  "build": "env-cmd -e envs react-scripts build",
  // ...
}