有没有办法使用不同的环境配置文件进行基于Ionic Framework的Cordova应用程序的开发和生产设置

Question

就像我们在Spring Framework中有很多变体来设置编译/运行/测试时环境，并使用它来设置不同的属性文件。 除了这个环境/配置文件变量之外，我们不会更改任何内容，以便能够对app进行适当的设置。

更具体地说：

我有两个文件：settings.dev.js和settings.prod.js

settings.prod.js：

var API_PATH = "http://example.com/api"
var OTHER_INPORTANT_SETTINGS = {....}

settings.dev.js：

var API_PATH = "http://localhost.com/api"
var OTHER_INPORTANT_SETTINGS = {....}

和一个Ionic Framework应用程序，其中服务正在使用此设置。 例如

me: $resource(API_PATH + '/my/profile', {}, {...}

在许多服务和控制器以及指令......等等......

有没有办法使用

• 在开发过程中的settings.dev.js
• settings.prod.js用于部署发布应用程序。

Answer 1

我只是为这个问题开发了一个解决方案。

1. 创建一个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' ]); 

2. 在html或js文件中包含settings.js 。

3. 将settings.js添加到.gitignore文件中，以便特定于环境的文件不会影响其他文件。

Answer 2

作为其中一种方法，您可以使用Grunt 。

grunt.registerTask('dev', ['processhtml:dev']);
grunt.registerTask('default', ['processhtml:prod', ...]);

在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 -->

这意味着<script src="/your/path/settings.prod.js"></script>将用于被移除dev ，并<script src="/your/path/settings.dev.js"></script>将被删除prod 。

现在构建一个生产环境使用grunt命令，并构建一个开发环境。 使用grunt dev 。

还有一件事，你可以使用grunt-contrib-watch来自动化dev构建：

watch: {
    html: {
        files: ['www/*.html'],
        tasks: ['dev']
    }
}

希望它会帮助某人。

Answer 3

我使用这个包，效果很好：

https://www.npmjs.com/package/gulp-ng-config

只要你有一个在minify / browserify / etc之前运行的任务，你就可以将它包含在你的单个编译的JS文件中。

Answer 4

对于加载配置文件，您可以使用HTML中的脚本URL添加广告脚本标记。

<script src="/your/path/settings.prod.js"></script>

要么

<script src="/your/path/settings.dev.js"></script>

然后你可以像往常一样定义变量。