我正在使用 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 文档中没有看到任何允许您执行此操作的内容。
最佳答案
我已经实现了创建模板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)。
关于javascript - 使用环境变量/参数化config.xml,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37816035/