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

时间:2016-06-14 15:18:17

标签: javascript android facebook cordova ionic-framework

我正在使用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文档中没有看到任何允许你这样做的内容。

4 个答案:

答案 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更改添加到模板中(例如添加插件),但这比不得不更好(并且在我的情况下,更少)在每次构建之前使用不同的环境更改变量,并且更不容易出错,尽管它并不理想。

更新(2017-10-13)

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

答案 3 :(得分:0)

在我的练习中,我们只将两个名为config.xmlconfig.beta.xml的文件放在不同的变量中。

如果构建测试版apk,请在mv config.beta.xml之前运行shell cordova platform add xxx