[英]Is there a way to use different environment profiles for development and production setting for Cordova app based on Ionic Framework
Say like we have in Spring Framework a lot of variations to set compile/run/test time environment, and use it to bind a different properties files with settings. 就像我们在Spring Framework中有很多变体来设置编译/运行/测试时环境,并使用它来设置不同的属性文件。 It is made for us not to change anything except this one environment/profile variable to be able to have proper settings for app.
除了这个环境/配置文件变量之外,我们不会更改任何内容,以便能够对app进行适当的设置。
More particularly: 更具体地说:
I have two files: settings.dev.js and settings.prod.js 我有两个文件:settings.dev.js和settings.prod.js
settings.prod.js: settings.prod.js:
var API_PATH = "http://example.com/api"
var OTHER_INPORTANT_SETTINGS = {....}
settings.dev.js: settings.dev.js:
var API_PATH = "http://localhost.com/api"
var OTHER_INPORTANT_SETTINGS = {....}
and an Ionic Framework app where services are using this settings. 和一个Ionic Framework应用程序,其中服务正在使用此设置。 Eg
例如
me: $resource(API_PATH + '/my/profile', {}, {...}
And so on in many services and controllers and maybe directives... 在许多服务和控制器以及指令......等等......
Is there some way to use 有没有办法使用
I just develop a solution for the issue. 我只是为这个问题开发了一个解决方案。
Create a grunt task (or the equivalent build tools) to copy the settings.<env>.js
file to settings.js
file. 创建一个grunt任务(或等效的构建工具)将
settings.<env>.js
文件复制到settings.js
文件。
copy: { dev: { src: 'settings.dev.js', dest: 'settings.js' }, prod: { src: 'settings.prod.js', dest: 'settings.js' } }, grunt.registerTask('dev', [ 'copy:development' ]); grunt.registerTask('prod', [ 'copy:prod' ]);
Include settings.js
in your html or js file. 在html或js文件中包含
settings.js
。
Add settings.js
to your .gitignore
file so that your environment specific file won't affect others. 将
settings.js
添加到.gitignore
文件中,以便特定于环境的文件不会影响其他文件。
As one of the approaches you can use Grunt . 作为其中一种方法,您可以使用Grunt 。
grunt.registerTask('dev', ['processhtml:dev']);
grunt.registerTask('default', ['processhtml:prod', ...]);
In html: 在html中:
<!-- build:remove:dev -->
<script src="/your/path/settings.prod.js"></script>
<!-- /build -->
<!-- build:remove:prod -->
<script src="/your/path/settings.dev.js"></script>
<!-- /build -->
It means that <script src="/your/path/settings.prod.js"></script>
will be removed for dev
, and <script src="/your/path/settings.dev.js"></script>
will be removed for prod
. 这意味着
<script src="/your/path/settings.prod.js"></script>
将用于被移除dev
,并<script src="/your/path/settings.dev.js"></script>
将被删除prod
。
Now to build a production environment use grunt
command, and to build a development env. 现在构建一个生产环境使用
grunt
命令,并构建一个开发环境。 use grunt dev
. 使用
grunt dev
。
And one more thing, you can use grunt-contrib-watch to automate dev builds: 还有一件事,你可以使用grunt-contrib-watch来自动化dev构建:
watch: {
html: {
files: ['www/*.html'],
tasks: ['dev']
}
}
Hope it will help someone. 希望它会帮助某人。
I used this package and it works great: 我使用这个包,效果很好:
https://www.npmjs.com/package/gulp-ng-config https://www.npmjs.com/package/gulp-ng-config
As long as you have a task that runs before your minify/browserify/etc, you can have it included into your single compiled JS file. 只要你有一个在minify / browserify / etc之前运行的任务,你就可以将它包含在你的单个编译的JS文件中。
For loading config files you can just ad script tag with the script URL in the HTML. 对于加载配置文件,您可以使用HTML中的脚本URL添加广告脚本标记。
<script src="/your/path/settings.prod.js"></script>
or 要么
<script src="/your/path/settings.dev.js"></script>
Then you can defined variables as usual. 然后你可以像往常一样定义变量。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.