構築時の環境設定npm

Question

いくつかのブログ記事があります。これは、gruntやgulpからnpmだけの建物への切り替えが良い例です（Cory HourseまたはKeith Cirkleなど）。これらのブログの投稿で説明していないことの1つは、環境設定を簡単に行う方法です。たとえば、一般的な要件は、異なるREST APIの場所を持つことです。開発中にサーバーはlocalhost:8080で実行されている可能性がありますが、運用時には/apiまたは/rest/apiなどの相対URLを使用してアクセスする必要があり、ポートまたはプロトコルは開発および生産のために異なります。

これにはいくつかの解決策があります。例えば、gruntは<% %>と<%= %>のようなテンプレート文字列をサポートしています。この質問のように、不平等やgulpのプラグインがあります。grunt-ng-configこれらのソリューションは、私が使用しているAngularに固有ですが、AngularJS固有のソリューションを探す必要はありません。

私はまた、angular-environmentプラグインについて知っていますが、実行時にこれが設定されているのを見る限り、ビルド時にこれを行うことができるものを探しています。

私が探しているのは、いくつかのテンプレート文字列を置き換えるか、または実行時に読むことができるいくつかの変数を持つJavascriptファイルを生成することによって、ビルド時にアプリケーションを構成できるものです。

1つの要件は、OSに依存しないことです。だから私はsedのようなUNIX固有のツールを使ってファイルを書き換えたくない。さまざまな変数の拡張（例：%対$）のため、解決策は環境変数に依存するべきではありません。

これには既存のソリューションまたはベストプラクティスがありますか？原因別の変数展開（$対例えば％）に

Answer 1

ソリューション これはあなたの最善の解決策を遮断する環境変数

に頼るべきではありません。なぜenv varsに頼らないのですか？ノードは、env varsにアクセスするために

process.env 

を提供します。あなたが参照する「さまざまな変数の展開」ではなく、process.envを使用するカスタムのグループ/ハッスルタスクを作成できます。

ビルド時に、Jadeテンプレートを使用して、env var値をHTMLに渡すことができます。これにより、構築プロセスの一環としてindex.htmlがオンザフライで生成され、env変数に基づいて関連するクラスが追加されます。

たとえば、env varの値に応じて、HTMLタグにクラスを設定することができます。

これはお客様を反映している可能性があります。

次に、あなたは

.customer1 .myimage { 
    background-image: url("customer1.png"); 
} 

.customer2 .myimage { 
    background-image: url("customer2.png"); 
} 

いくつかのCSSを持っている可能性があります。また、ビルド時に頭に追加されたクラスを検出するためにJavaScriptを使用することができます。