场景:
我正在构建一个Ionic3
应用程序,并且我的config.xml
有一些我希望根据我的环境更改的数据(例如,我希望我的Facebook应用程序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
来构建应用程序(不是根中的config.xml
,即。,模板)。我只会更改钩子中的src
和dest
文件(分别为config.xml
和www/config.xml
)。但是我也没有找到实现这一目标的方法。
对此有任何想法吗?
(它不需要是离子特定的解决方案。)
更新(2017-10-13)
基于鲍比的答案,我在安装和卸载插件时达到了我想要的东西。我创建了4个钩子:after_plugin_add
,after_plugin_rm
,before_plugin_add
,before_plugin_rm
。
before
挂钩将模板(config.tpl.xml
)复制到config.xml
文件中,而after
挂钩进行倒数。
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
值。
一种解决方案可以是为 fore fore_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