[英]What is the preferred way to set phase-specific environments in Polymer apps?
I'm building an web app using Polymer from an app template via polymer init starter-kit
. 我正在使用来自app模板的Polymer通过polymer init starter-kit
构建一个Web应用程序。
I have some phase-specific environment variable such as backend API entrypoint. 我有一些特定于阶段的环境变量,例如后端API入口点。 There's a behavior for those environment variables: 这些环境变量有一个行为:
<script>
EnvBehavior = {
properties: {
apiBaseUrl: {
type: String,
// value: '//some-url.com' // production
value: 'http://localhost:8000' // development
}
}
};
</script>
And apiBaseUrl
is used in other elements: 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>
This works. 这有效。 But I'd like to build an app for production with apiBaseUrl
's default value //some-url.com
, which is commented out on the code. 但是我想用apiBaseUrl
的默认值//some-url.com
构建一个用于生产的应用程序,该代码被注释掉了。 How can I effectively set phase-specific variables on build time? 如何在构建时有效地设置特定于阶段的变量? I use polymer-cli for build; 我使用聚合物-cli进行构建; run polymer build
. 运行polymer build
。
Since it looks like you are already using a separate JS file for implementing the EnvBehavior
, you could do the following. 由于看起来您已经在使用单独的JS文件来实现EnvBehavior
,因此您可以执行以下操作。 Create multiple versions of this file, for example: 创建此文件的多个版本,例如:
env-behavior.js
(for local), env-behavior.js
(对于本地), env-behavior.js.stage
(for stage), and env-behavior.js.stage
(用于舞台),和 env-behavior.js.production
(for production). env-behavior.js.production
(用于制作)。 Obviously, put appropriate configuration values within each file. 显然,在每个文件中放置适当的配置值。
With this, when you will be using polymer serve
everything should work with the local version (since it is included by default when no file-swapping is done). 有了这个,当你将使用polymer serve
一切都应该与本地版本一起使用(因为在没有进行文件交换时默认包含它)。 But when you build for a specific environment, you simply overwrite the env-behavior.js
with, say, env-behavior.js.production
when deploying to production. 但是,当你建立一个特定的环境,你可以覆盖env-behavior.js
有,比方说, env-behavior.js.production
部署到生产时。
For swapping files, you can create a manual post-build gulp task or even customize the polymer build
command by altering the polymer-build code. 对于交换文件,您可以创建手动构建后的gulp任务,甚至可以通过更改聚合物构建代码来自定义polymer build
命令。
Also, I would strongly advise agains using client side checks for selecting the appropriate config values, because: 此外,我强烈建议使用客户端检查来选择适当的配置值,因为:
There is no feature that lets you do this with the polymer-cli
. 没有任何功能可以让你使用polymer-cli
。
Instead of manually changing the apiBaseUrl
property for development and production you could detect which environment it's running in. 而不是手动更改apiBaseUrl
属性以进行开发和生产,您可以检测它正在运行的环境。
Example: 例:
properties: {
apiBaseUrl: {
type: String,
value: function() {
if (window.location.hostname === 'localhost') {
return 'http://localhost:8000';
} else {
return '//some-url.com';
}
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.