在Polymer应用程序中设置特定于阶段的环境的首选方法是什么？

Question

我正在使用应用程序模板中的Polymer构建一个Web应用程序polymer init starter-kit.

我有一些特定于阶段的环境变量,例如后端API入口点.这些环境变量有一个行为:

<script>
  EnvBehavior = {
    properties: {
      apiBaseUrl: {
        type: String,
        // value: '//some-url.com'     // production
        value: 'http://localhost:8000' // development
      }
    }
  };
</script>

并apiBaseUrl用于其他元素:

<dom-module id="my-element">
  <template>
    <iron-ajax url="{{apiBaseUrl}}/foo" method="POST" 
           content-type="application/x-www-form-urlencoded" 
           body="{{requestBody}}" handle-as="json" 
           on-response="onResponse" on-error="onError"></iron-ajax>
  </template>
  <script>
    Polymer({
      is: 'my-element',
      properties: {
        requestBody: {foo: 'bar'}
      },
      behaviors: [EnvBehavior],
      onResponse: function(e) {
        console.log(e.detail.response);
      },
      onError: function(e) {
        console.log(e.detail.request.xhr.response);
      }
    });
  </script>
</dom-module>

这有效.但我想构建一个带有apiBaseUrl默认值的生产应用程序,该应用程序//some-url.com在代码中被注释掉了.如何在构建时有效地设置特定于阶段的变量？我使用聚合物-cli进行构建; 跑polymer build.

Answer 1

由于您似乎已经使用单独的JS文件来实现EnvBehavior,因此您可以执行以下操作.创建此文件的多个版本,例如:

• env-behavior.js (对于当地人),
• env-behavior.js.stage (舞台),和
• env-behavior.js.production (用于生产).

显然,在每个文件中放置适当的配置值.

有了这个,当你将使用时,polymer serve一切都应该与本地版本一起使用(因为在没有进行文件交换时默认包含它).但是,当您为特定环境构建时,只需在部署到生产时覆盖env-behavior.jswith env-behavior.js.production.

对于交换文件,您可以创建手动构建后的gulp任务,甚至可以polymer build通过更改聚合物构建代码来自定义命令.

此外,我强烈建议使用客户端检查来选择适当的配置值,因为:

• 代码更复杂
• 它引入了不必要的开销
• 每个人都可以看到其他配置值(例如,其他环境的位置,然后可以被恶意用户定位)
• 看起来不对劲.