Cordova config.xml 环境变量

Question

场景:

我正在构建一个 Ionic3应用程序，和我的config.xml有一些我希望能够根据我的环境进行更改的数据(例如，我希望我的 Facebook 应用程序 ID 对于开发、暂存和生产具有不同的值)。

我通过创建模板 config.xml 实现了这一点(文件是 config.tpl.xml )和 before_prepare cordova hook 将模板中的变量替换为正确的值，并将生成的内容保存在 config.xml 中.

cordova钩子(Hook)使用 npm包 es6-template-strings :

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

钩子(Hook)是:

#!/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/不同环境的目录，根据 NODE_ENV 选择我构建 cordova 时定义的值。例如，如果 NODE_ENV=prod (生产)，那么它将使用文件 environment.prod.json :

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

当钩子(Hook)执行时，这部分在 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 进行一些自动更改时(如添加插件)，它没有反射(reflect)在cordova.tpl.xml中，所以我必须记住手动进行更改。

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

我的问题:

我想知道是否有办法避免这些手动更改，但像我现在一样继续使用环境变量。

可以实现自动更改config.xml待完成config.tpl.xml相反(就像使用 --save 添加插件时一样)，如果可能的话，但我还没有找到任何 cordova关于此的选项。

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

对此有什么想法吗？

(它不需要是特定于 Ionic 的解决方案。)

更新(2017-10-13)

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

before Hook 将模板 ( config.tpl.xml ) 复制到 config.xml 中文件和 after钩子(Hook)则相反。

before_plugin_add和before_plugin_rm钩子(Hook)如下:

#!/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钩子(Hook)几乎相同，只是交换 FILES.SRC和FILES.DEST值。

Answer 1

一种解决方案可能是为 before_plugin_install 和 after_plugin_install 创建 Hook 。

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