有沒有辦法使用不同的環境配置文件進行基於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>

然后你可以像往常一樣定義變量。