我正在使用cordova-plugin-facebook4插件构建一个离子/ 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
用于开发应用,我们为其他环境(如QA)提供了单独的Facebook应用。
有没有办法在config.xml
中参数化这些变量并将它们作为构建步骤的一部分进行替换?类似的东西:
<plugin name="foo" spec="~0.0.0">
<variable name="bar" value="${env.APP_ID}"/>
</plugin>
...然后运行APP_ID=baz ionic build android
或类似的东西。
我在cordova文档中没有看到任何允许你这样做的内容。
答案 0 :(得分:10)
@Ghandi使用cordova钩子的解决方案是如何实现这一目标的一个很好的例子,尽管它只是专门用于Windows,因为它使用批处理文件和PowerShell作为钩子脚本。
作为跨平台解决方案,您可以在cordova之上使用某种构建工具。对于我正在开发的项目,我们在一个子目录中有一个cordova项目,并且已经使用gulp来构建我们应用程序的其余部分,因此我们修改了我们的任务,将我们的cordova资产复制到构建目录中还会在config.xml
上执行搜索和替换。它从环境变量中提取替换,并使用dotenv库从.env
文件加载环境(未检入存储库)。
var gulp = require('gulp'),
replace = require('gulp-replace'),
gutil = require('gulp-util'),
filter = require('gulp-filter'),
path = require('path'),
dotenv = require('dotenv'),
argv = require('yargs').argv,
isRelease = !!(typeof argv.release !== 'undefined' ? argv.release : (typeof argv.r !== 'undefined' ? argv.r : false));
gulp.task('cordova_assets', ['clean', 'templates'], function() {
dotenv.config({path: path.join(__dirname, 'cordova', '.env'), silent: true});
var f = filter(['cordova/config.xml'], {restore: true});
return gulp.src(['cordova/**/*'], {base: './'})
.pipe(f)
.pipe(replace(/\$\$([A-Z0-9_]+)/gi, function(substr, varname) {
var repl = '';
if(!isRelease && typeof process.env[varname + '_DEBUG'] !== 'undefined')
repl = process.env[varname + '_DEBUG'];
else if(isRelease && typeof process.env[varname + '_RELEASE'] !== 'undefined')
repl = process.env[varname + '_RELEASE'];
else if(typeof process.env[varname] !== 'undefined')
repl = process.env[varname];
else {
throw new gutil.PluginError('cordova_config', {
message: 'expected but could not find the environment variables "' + varname +
'" or "' + varname + '_' + (isRelease ? 'RELEASE' : 'DEBUG') + '" which is used in cordova/config.xml. ' +
'Add it to cordova/.env or specify them explicitly when running the build command.'
});
}
console.log('replacing "%s" with "%s"', substr, repl);
return repl;
}))
.pipe(f.restore)
.pipe(gulp.dest('build'));
});
它将替换config.xml中以两个美元符号开头的任何变量,并且由字母数字字符和下划线组成,如果存在,则包含相应环境变量的值(如果不存在则抛出错误)。此外,您可以使用_DEBUG
或_RELEASE
在config.xml中为变量添加后缀,并在适当时使用这些值。
它假设以下项目结构:
/
cordova
config.xml
.env
(包含您的环境变量)build
(构建目录和cordova应用程序的最终输出)答案 1 :(得分:9)
正如您在帖子中提到的,在官方的cordova文档中没有太多关于此的文档。在这个分析上花了一些时间之后,我就得出结论:
现成的一些最小帮助可用于参数化config.xml
中可用的插件变量。这可以通过official cordova link中提到的偏好变量来实现。但这种方法的问题在于它的工作取决于插件的编码方式。
我用facebook插件尝试了这种方法,但它没有用:(我试过如下:
<preference name="MY_CUSTOM_STRING" default="12345678901234567" />
<plugin name="cordova-plugin-facebook4" spec="~1.7.1">
<variable name="APP_ID">$MY_CUSTOM_STRING</variable>
<variable name="APP_NAME" value="My_Appy_App"/>
</plugin>
尝试使用谷歌地图插件的相同方法,它工作了:)我尝试如下:
<preference name="MY_CUSTOM_STRING" default="12345678901234567" />
<plugin name="cordova-plugin-googlemaps" spec="~1.3.9">
<variable name="API_KEY_FOR_ANDROID">$MY_CUSTOM_STRING</variable>
</plugin>
所以我可以得出结论,参数化方法依赖于核心插件代码。
对于facebook插件,如果你想参数化APP_ID
变量,那么我猜钩子是继续进行的方式。即使是一个简单的Windows批处理文件来替换字符串匹配也应该没问题,并且可以在预构建操作上调用它来实现您的需求。希望它有所帮助。
更新:
我同意布兰登的评论。
由于时间有限,我能够提出解决此问题的cordova钩子。它可能是粗糙的方式,它也可以改进,但现在这种方法工作正常。已将钩子作为示例应用程序发布在我的github page中,并且README文件中包含有关它的完整信息。希望能帮助到你。让我发布。
答案 2 :(得分:8)
我已经实现了创建模板config.xml
(文件为config.tpl.xml
)和before_prepare
cordova挂钩,以使用正确的值替换模板中的变量并保存生成的config.xml
中的内容。
cordova hook使用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更改添加到模板中(例如添加插件),但这比不得不更好(并且在我的情况下,更少)在每次构建之前使用不同的环境更改变量,并且更不容易出错,尽管它并不理想。
现在,当我添加/删除插件时,xml模板文件也会更新。我刚刚添加了here描述的钩子。
答案 3 :(得分:0)
在我的练习中,我们只将两个名为config.xml
和config.beta.xml
的文件放在不同的变量中。
mv config.beta.xml
之前运行shell cordova platform add xxx
。