node + dva + react 方式写入配置环境变量

301 阅读1分钟

在一些项目不支持 .env 形式增加环境变量,为了项目统一书写环境变量形式,node 的一些模块写入环境变量,或者根据gitlab 当前分支来写入不同的环境变量形式。

增加文件 .env.development, .env.test, .env.production

引入所需文件包 (以下若项目中无法获取则手动引入)

  1. npm install yargs
  2. npm install dotenv
  3. npm install fs

代码实现

针对不同种类的项目注入 env 的实现形式

  1. dav 在 .webpackrc.js 中
const fs = require("fs");
const dotenv = require("dotenv");
const argv = require("yargs").argv;
const colorconsole = require("@kenworks/colorconsole");
const git = require("./src/utils/git")

// 设置环境变量
const setenv = env => {
  const envContent = dotenv.parse(fs.readFileSync(".env." + env));
  console.log(envContent, 'envContent----');
  for (const k in envContent) {
    const str = `process.env.${k}`
    process.env[str] = envContent[k];
  }
};
// 如果npm run dev test等参数
const envs = { production: "master", test: "test", development: "dev" };
const tag = argv.dockerEnv || argv.mode || git.current() || process.env.API_ENV || "test";
const env = Object.keys(envs).find(
  i => !tag.indexOf(envs[i]) || !tag.indexOf(i)
);

console.log('env-------' , argv)
console.log('tag-------' ,tag)
setenv(env);
const IS_BUILD = argv._[0] === "build" || "";
// const IS_PROD = IS_BUILD && env === "production";

process.env.REACT_APP_BUILD = IS_BUILD;

colorconsole.log("--------------------");
colorconsole.log(
  "当前模式:" + (process.env.REACT_APP_BUILD ? "打包模式" : "本地服务"),
  "black",
  226
);
colorconsole.log("数据环境:" + env, "black", 226);
colorconsole.log("--------------------");
 define: {
    ...process.env,
    'process.env.TEST': process.env.TEST,
    'process.env.NODE_PUB_PATH': process.env.NODE_PUB_PATH,
    // 'process.env.REACT_APP_OTHER_URL': process.env.REACT_APP_OTHER_URL
  },

ps:

dva: 2.1.0

antd: 3.16.4

react: 16.2.0