Question

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

Answer 1

@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应用程序的最终输出）

Answer 2

正如您在帖子中提到的，在官方的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文件中包含有关它的完整信息。希望能帮助到你。让我发布。

Answer 3

我已经实现了创建模板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描述的钩子。

Answer 4

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

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

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

4 个答案:

更新（2017-10-13）