管理不同构建环境（如QA，UAT，Production）的JavaScript配置文件

Question

So you are building a stand alone Single Page Application in JavaScript that is served statically. It connects to an API.

Your application has a JSON object in its main.js like this:

var config = {
 apiPath: 'http://dev.api.example.com',
 appTitle: 'hello'
};

You use Grunt to create a release build, this transpiles all your SASS, ES6, AMD Modules etc code into one or two JavaScript files, along with this config object.

Your production API url is http://api.example.com and when you do a release build, you want just this value in the config to change. (Maybe you would want to change other config parameters too). You have a release config

var config = {
 apiPath: 'http://api.example.com'
};

How can a JavaScript config file be altered depending on different types of release environments during a build. Notice that I want to merge the release config into the default, not maintain totally seperate files with all the settings. While there are grunt plugins for setting a build mode, I've not found any that have the ability to update config files, only hacks that change which file is pointed to.

ASP.NET has web.config transforms that do exactly this, any property in the release transform for example, will overwrite the 'default' config on packaging. Does such a workflow exist using grunt or something?

Answer 1

最后，我通过结合使用环境变量和一个名为Confidence的神奇节点来解决问题，在这个节点中，您将所有不同的envs配置设置放在一个文件中，并根据过滤器将它们解析为单个配置（例如环境变量） - 然后可以使用WebPack等工具将这些注入到构建过程中。