javascript - 使用环境变量/参数化config.xml

Question

我正在使用 cordova-plugin-facebook4 插件构建 ionic/cordova 项目以进行 Facebook 身份验证访问。在 config.xml 中，它看起来像:

<plugin name="cordova-plugin-facebook4" spec="~1.7.1">
  <variable name="APP_ID" value="1234567890123456"/>
  <variable name="APP_NAME" value="My_Appy_App"/>
</plugin>

这没问题，但我们使用的 APP_ID 是用于开发应用程序的，我们有一个单独的 facebook 应用程序用于其他环境，例如 QA。

有没有什么方法可以在 config.xml 中参数化这些变量，并将它们替换为构建步骤的一部分？像这样的东西:

<plugin name="foo" spec="~0.0.0">
  <variable name="bar" value="${env.APP_ID}"/>
</plugin>

... 然后运行 ​​APP_ID=baz ionic build android 或类似的东西。

我在 cordova 文档中没有看到任何允许您执行此操作的内容。

Answer 1

我已经实现了创建模板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/ 目录中有不同环境的文件，这些文件是根据我在构建 cordova 时定义的 NODE_ENV 值选择的。例如，如果 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 的自动 cordova 更改添加到模板中(就像添加插件一样)，但这要好得多(而且，在我的例子中，更少频繁)，而不是在每次构建不同环境之前更改变量，并且更不容易出错，尽管它并不理想。

更新 (2017-10-13)

现在，当我添加/删除插件时，xml 模板文件也会更新。我刚刚添加了描述 here 的钩子(Hook)。