2016-01-11 4 views
22

角度2を実行しようとしていますseed application。残念ながらnpm installは、大量のファイルをnode_modulesに置きます。これは、シードアプリケーションコードとともに提供する必要があります。`node_modules`のすべてのファイルを提供する必要なしに、AngularJS 2アプリケーションをどのように提供できますか?

私はこれらの静的なファイルをすべて提供する必要はありません。実際に必要なものだけをサーバにする方法はありますか?

Google App Engine開発環境(dev_appserver.py)では、アップロードできるファイルの数に制限があり、実稼働環境にはアップロードできるファイルの合計サイズに制限があるためです。メガバイトの不要なファイルをアップロードするのは恥ずかしいでしょう。

+0

http://stackoverflow.com/questions/34526844/what-is-node-modules-directory-in-angularjsによると、私のアプリケーションを提供するときに 'node_modules'ディレクトリを含める必要はありません。私の問題を解決する。しかし、ディレクトリを削除してアプリケーション( 'npm start')を実行すると、' node_modules'にファイルをロードする必要があるため、アプリケーションは実行されません。 – Dan

+0

[browserify](http://browserify.org)が役立つかもしれませんか? – Dan

+0

node_modulesフォルダ(https://github.com/robianmcd/tag-trends)を提供していないAngular2アプリを作成しました。私はサーバーに必要なものすべてをgulpを持つビルドフォルダにコピーしています。ここでは同じことをやっている別のプロジェクトがありますが、gulpファイルはもっとシンプルです:https://github.com/robianmcd/ng2-movies – rob

答えて

6

これは、この種のプロジェクトのgulpスクリプトによって処理されます。

https://github.com/angular/angular2-seed/blob/e66d24fd34d37884cec41a3583bad563cf5a43e5/gulpfile.js#L15

一気タスクをコピーnode_modulesからdist/vendorにファイル。一息をインストールした後

//copy dependencies to dist folder 
gulp.task('copy:deps', function(){ 
    return gulp.src([ 
    'node_modules/angular2/bundles/angular2-polyfills.js', 
    'node_modules/angular2/bundles/angular2.dev.js', 
    'node_modules/angular2/bundles/http.js', 
    'node_modules/angular2/bundles/router.js', 
    'node_modules/rxjs/bundles/Rx.js', 
    'node_modules/systemjs/dist/system.js', 
    ]).pipe(gulp.dest('dist/vendor')); 
}); 

、単にデフォルトの一気のタスクを開始するか、デフォルトの一気のタスクはまた他のすべての.jsファイル、.htmlをや.cssファイルをコピーしますgulp clean && gulp

を呼ぶであろうnpm startを実行するためにgulpを入力distフォルダ。 distフォルダには、展開する必要のあるものがすべて含まれています。

1

あなたは望ましくないファイルを除外するために、アプリケーションの設定ファイルにthe skip_files elementを使用することができます。アプリケーション ディレクトリ内のファイル要素が指定

skip_filesは、App Engineにアップロードすることができません。値は 正規表現または正規表現のリストです。正規表現に一致するファイル名 は、アプリケーションがアップロードされるときにアップロードするファイルのリストから除外されます( )。

そのドキュメントセクションのデフォルトを上書きすることに注意してください。

注:これは開発サーバー側で役立つかどうかはよくわかりませんが、それは設定によっては無視されるようですが(しかし、私の答えが見つからないようです1つのそのような場合は、詳細を取得する)。

+0

これは本番環境へのアップロードでは動作しますが、[このバグ](https://code.google.com/p/googleappengine/issues/detail?id=9300)のためApp Engine開発環境では動作しません。インターネット上には多数の回避策があります。私が本当に望むのは、自分のアプリケーションがデプロイメントに依存するファイルだけをバンドルし、 'node_modules'にあるメガバイトのファイルをアップロードする必要はありません。 – Dan

+0

うん、それは私がノートを追加したのとまったく同じ問題です:)あなたもそれを 'スターとするべきです。うまくいけば注目を集めるのに役立ちます。 –

+0

昔はスター付きです。 :-) 'skip_files'を使うことのもう一つの問題は、実際に必要な' node_modules'ファイルにどのファイルがあるのか​​わかりません。 (私はAngularJSとNodeについて全く新しいです。) – Dan

10

のように、生産のLIBSのCDNバージョンを使用してください:あなたの配布にLIBSを移動するために何をどのように処理するためにあなたにhastleが保存されますが、彼らはまた救うこと

<script src="https://rawgithub.com/systemjs/systemjs/0.19.6/dist/system.js"></script> 
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script> 
<script src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script> 
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2.dev.js"></script> 

だけでなく、以前に訪問したWebページからダウンロードした場合は、ある程度時間がかかります。

+0

どこのCDNバージョンのURLを見つけるのですか? – William

+0

多くのCDNプロバイダがありますが、Googleには独自のものがあります:https://developers.google.com/speed/libraries/ – Langley

1

npm startを実行すると、distというフォルダが作成されます。このフォルダにはアプリケーション全体が含まれています。したがって、node_modulesを提供する必要はありません。

0

angle-cliコマンドを使用してビルドします。その後、distフォルダを取得します。

このdistフォルダをアプリケーションの最後から使用し、次のapp.yamlを使用してプロジェクトを起動して実行します。角度2と角度-CLIで

https://gist.githubusercontent.com/darktable/873098/raw/0197279f7faf07a3f64689589f097790d198b22a/app.yaml

+0

潜在的な解決策へのリンクはいつでも歓迎しますが、[リンクの前後にコンテキストを追加](http: /meta.stackoverflow.com/a/8259/169503)あなたの仲間のユーザーは、それが何であるか、なぜそこにいるのかを知ることができます。ターゲットサイトに到達できない場合や、永続的にオフラインになる場合は、常に重要なリンクの最も関連性の高い部分を引用してください。外部サイトへのリンク以上になることは、なぜ、どのように答えが削除されるのかという理由が考えられます。(http://stackoverflow.com/help/deleted-answers) –

0

、それはかなりまっすぐ進むのです。あなたは麻薬やカスタムスクリプトを必要としません。ちょうど角度cli ng build --prodで構築し、非常に小さく最適なバンドルを細分化し、細かくし、生産することは素晴らしい仕事です。私はsmall postと書いています - Google AppEngineまたはFirebaseにAngular 2アプリをビルドして配備します。