Question

我正在通过polymer init starter-kit使用应用模板中的Polymer构建网络应用。

我有一些特定于阶段的环境变量，例如后端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.js，例如env-behavior.js.production。

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

另外，我会强烈建议使用客户端检查来选择适当的配置值，因为：

代码更复杂
引入了不必要的开销
每个人都可以看到其他配置值（例如，其他环境的位置，然后可以被恶意用户定位）
看起来不对。

Answer 2

没有任何功能可让您使用polymer-cli。

执行此操作

不是手动更改apiBaseUrl属性以进行开发和生产，而是可以检测它在哪个环境中运行。

示例：

properties: {
    apiBaseUrl: {
        type: String,
        value: function() {
            if (window.location.hostname === 'localhost') {
                return 'http://localhost:8000';
            } else {
                return '//some-url.com';
            }
        }
    }
}

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

2 个答案: