Cordova config.xml环境变量

场景：

我正在构建一个Ionic3应用程序,我的config.xml有一些数据,我希望能够根据我的环境进行更改(例如,我希望我的facebook app id具有不同的开发,登台和制作价值).

我实现了这个创建模板config.xml(文件是config.tpl.xml)和before_prepare cordova钩子,用正确的值替换模板中的变量,并将生成的内容保存在config.xml中.

cordova钩子使用npm包es6-template-strings：

npm install es6-template-strings --save-dev

钩子是：

#!/usr/bin/env node
var fs = require('fs');
var path = require('path');
var compile = require('es6-template-strings/compile');
var resolveToString = require('es6-template-strings/resolve-to-string');

var ROOT_DIR = process.argv[2];
var FILES = {
    SRC: "config.tpl.xml",
    DEST: "config.xml"
};

var env = process.env.NODE_ENV || 'dev';
var envFile = 'src/environments/environment.' + env + '.json';

var srcFileFull = path.join(ROOT_DIR, FILES.SRC);
var destFileFull = path.join(ROOT_DIR, FILES.DEST);
var configFileFull = path.join(ROOT_DIR, envFile);

var templateData = fs.readFileSync(srcFileFull, 'utf8');

var configData = fs.readFileSync(configFileFull, 'utf8');
var config = JSON.parse(configData);

var compiled = compile(templateData);
var content = resolveToString(compiled, config);

fs.writeFileSync(destFileFull, content);

我在src / environments /目录中有不同环境的文件,这些文件是根据我构建cordova时定义的NODE_ENV值选择的.例如,如果NODE_ENV = prod(生产),那么它将使用文件environment.prod.json：

{
    ...
    "FACEBOOK_APP_ID": "11111111",
    "FACEBOOK_APP_NAME": "My Facebook App Name",
    ...
    "PUSH_SENDER_ID": "22222222",
    ...
}

当钩子被执行时,这部分在cordova.tpl.xml中：

<plugin name="cordova-plugin-facebook4" spec="~1.7.4">
    <variable name="APP_ID" value="${FACEBOOK_APP_ID}" />
    <variable name="APP_NAME" value="${FACEBOOK_APP_NAME}" />
</plugin>
<plugin name="phonegap-plugin-push" spec="~1.9.2">
    <variable name="SENDER_ID" value="${PUSH_SENDER_ID}" />
</plugin>

变得像：

<plugin name="cordova-plugin-facebook4" spec="~1.7.4">
    <variable name="APP_ID" value="11111111" />
    <variable name="APP_NAME" value="My Facebook App Name" />
</plugin>
<plugin name="phonegap-plugin-push" spec="~1.9.2">
    <variable name="SENDER_ID" value="22222222" />
</plugin>

问题：

到现在为止还挺好.问题是当对config.xml进行一些自动更改(比如添加插件)时,它不会反映在cordova.tpl.xml中,所以我必须记住手动进行更改.

虽然现在完成它的方式仍然比必须像以前一样添加每个环境变量要好得多(这是一个维护噩梦并且容易出错),我仍然需要每次添加/更改/删除插件时更改模板(不那么频繁,当我忘记它时很容易发现问题,但仍然远离理想).

我的问题：

我想知道是否有办法避免这些手动更改,但继续使用环境变量,就像我现在正在做的那样.

可以实现对config.xml进行自动更改,而不是对config.tpl.xml进行更改(如添加带-save的插件),如果可能的话,但我没有找到任何关于此的cordova选项.

或者使用config.xml作为模板并将其发送到定义了变量的另一个地方(例如发送到www / config.xml),并使用其他位置的config.xml来构建应用程序(而不是配置)根目录中的.xml,即模板).我只会更改钩子中的src和dest文件(分别为config.xml和www / config.xml).但我也没有找到实现这个目标的方法.

有什么想法吗？

(它不需要是离子特定的解决方案.)

更新(2017-10-13)

基于Bobby的答案,我在安装和卸载插件时实现了我想要的.我创建了4个钩子：after_plugin_add,after_plugin_rm,before_plugin_add,before_plugin_rm.

before钩子将模板(config.tpl.xml)复制到config.xml文件中,后挂钩执行反向操作.

before_plugin_add和before_plugin_rm挂钩如下：

#!/usr/bin/env node
var fs = require('fs');
var path = require('path');

var ROOT_DIR = process.argv[2];
var FILES = {
    SRC: 'config.tpl.xml',
    DEST: 'config.xml'
};

var srcFileFull = path.join(ROOT_DIR, FILES.SRC);
var destFileFull = path.join(ROOT_DIR, FILES.DEST);

var templateData = fs.readFileSync(srcFileFull, 'utf8');
fs.writeFileSync(destFileFull, templateData);

after_plugin_add和after_plugin_rm挂钩几乎相同,只是交换FILES.SRC和FILES.DEST值.

一种解决方案可能是为before_plugin_install和after_plugin_install创建钩子.

On before_plugin_install copy the cordova.tpl.xml to cordova.xml.
... Plugin is installed ...
On after_plugin_install copy cordova.xml to cordova.tpl.xml