2016-10-19 11 views
2

に私はは、私は我々のソースコードのうち、環境変数を維持するためにどのように苦労していますnativescript&angular2

をNativeScript(2.3.0)を使用してモバイルアプリケーションを構築し、Angular2(2.0.0)していた環境依存の変数を渡します環境(dev/test/prod)に応じてロードされる方法。

理想的には、それらを保持する専用ファイル(.env.dev .env.test .env.prod)を用意したいと思いますが、私は動作するすべてのソリューションに公開しています。

ネイティブスクリプトのドキュメントやグーグルーグのいずれのヘルプも見つかりませんでした。

答えて

2

は、いくつかの研究の後、私は解決策を持って、私は、将来の参照のためにそれを投稿:

は、このドキュメントに触発:https://github.com/AngularClass/angular2-webpack-starter/wiki/How-to-pass-environment-variables%3F

これは、すべてのグローバル名前空間に変数を公開し、それらを通じ上書きするのWebPACKを使用してについてですnew webpack.DefinePluginhttps://webpack.github.io/docs/list-of-plugins.html#dependency-injection)。ステップガイドによって

ステップ:

  • NSモジュールとしてのWebPACKをインストールします。tns install webpackを(詳細https://docs.nativescript.org/tooling/bundling-with-webpack
  • node_moduleとしてWebPACKのインストール:npm install --save-dev webpack(私はそれが冗長なようだ知っているが、それは私の唯一の方法でありますwebpack.config.jsからwebpackオブジェクトにアクセスすることが判明しました)

  • webpack.config.jsで次のように変更します。(その他の設定は省略)

    var bundler = require("nativescript-dev-webpack"); 
    var webpack = require("webpack"); 
    
    module.exports = bundler.getConfig({ 
    
        plugins: [ 
        new webpack.DefinePlugin({ 
         'ENV': JSON.stringify('dev'), 
         'API_URL': JSON.stringify('my_api_url'), 
         'HMR': 'whatever', 
        }) 
        ] 
    }); 
    

/appフォルダに(彼らはWebPACKのによって上書きされます言ったように)完了

global-environment.ts

// Extra variables that live on Global that will be replaced by webpack DefinePlugin 
declare var ENV: string; 
declare var HMR: boolean; 
declare var API_URL: string; 

interface GlobalEnvironment { 
    ENV; 
    HMR; 
    API_URL; 
} 

をグローバル変数とグローバルな名前空間を移入することを目指し、以下のファイルを作成します!

おそらくあなたはこれについてより良い方法や改良があるかもしれません。私はそれらを聞いてうれしいです。

関連する問題