Umi: Custom Environment Variables Support

[xiaoxiangmoe]

Like Create React App:

.env,
.env.local,
.env.development, .env.test, .env.production,
.env.development.local, .env.test.local, .env.production.local

[sorrycc]

It's too compilicated, I don't think we really need these.

[khalibloo]

@sorrycc could you recommend an alternative perhaps? I need different configurations for dev, staging and production
Edit:
Found a way to achieve this using define in .umirc.js, not quite as convenient as .env since I still have to commit it in my code

[iamgbayer]

@sorrycc, you have a recommendation to use different configurations?

[khalibloo]

I found the defines work really well in the end. In .umirc.js, I can have something like this

export default {
  //...other configs
  //env vars
  define: {
    "APP_ENV": "default",
    "ENDPOINT": "https://www.example.com",
    "THEME": {faveColor: 'blue'}, //objects are supported as well
  },
}

And then in the code, you can simply use the variables as like so.

    const baseUrl = ENDPOINT;
    console.log(THEME.faveColor);

To use different configs in different environments, you can override them in your other .umirc.xxx.js files. For example, I have .umirc.local.js, .umirc.staging.js and .umirc.prod.js where I redefine the variables I want to override. The local one can be kept out of git using gitignore of course.
Finally, on each environment, you use the UMI_ENV env variable to determine which config file is used. On my staging env, UMI_ENV is set to staging, so that .umirc.staging.js is used, and so on. Have a look at the docs here https://umijs.org/guide/config.html#configuration-file

[dimasusername]

There is a problem with eslint-loader during development
I was able to find this solution: https://github.com/umijs/umi/issues/2160#issuecomment-562769077