2016-10-26 12 views
9

最近、私は角度2のプロジェクトにJSPMを使用しました。非常に簡単で使いやすいとわかりました。新しいモジュールを追加する場合と、本番用のバンドルを作成する場合の両方JSPMと角2のWebPackについて

それだけで基本的にです:

jspm install npm:@angular/somepackage 

とpackage.jsonとsystem.jsのconfigsは私のために自動的に更新されます。私は、生産・バンドルを作成したい場合は

私は単純に次の操作を行います。

jspm bundle-sfx app/main app-bundle.min.js --minify 

そして、私はちょうどHTMLのように作るそれを使用する:

<body> 
    <my-app>Loading...</my-app> 
    <script src="app-bundle.min.js"></script> 
</body> 

IT負荷をして、高速に実行されます。小さくて大きなAngular 2アプリケーションにも使用できます。

開発の設定も問題ありません。アプリのリロードは十分速く、デバッグは順調です。 NPMリポジトリからJSPMまでのほぼすべてのモジュールを使用できるようにするには、とても良いことです。

記事を読むと、人々が角型2アプリのウェブパックに移動しているような印象を受けます。私はwebpack自身に移動していません。なぜなら、私の設定はうまく動作し、webpackはもっと多くの設定のように思えるからです。

しかし、JSPMのサポートが徐々に消えていくのではないかと心配しています。

このためにwebpackに切り替える必要がありますか? webpackに切り替えると、私が発見していないいくつかの利点がありますか?

私はここで見つけることができます私のセットアップ証明するいくつかの非常に単純な角度2つのクイック・スタート・テンプレートがあります。https://github.com/fintechneo/angular2-templates

は、このセットアップのためのWebPACKへの切り替えの利点についていくつかの意見を得ることは非常に幸せになるでしょう。


UPDATE 2017年3月26日

この質問は、私は、生産のビルドのためにも、より高速な読み込み時間の必要性を発見した投稿されましたので。 JSPM(またはWebpack)は最適化されたバンドルを生成しますが、それでも大きすぎるため、バンドルをダウンロードした後に、angular2テンプレートをコンパイルする必要があります。

私は、Ahead-of-Timeコンパイラクックブック(https://angular.io/docs/ts/latest/cookbook/aot-compiler.html)を見つけました。これは、ダウンロード後すぐに始まる小さなバンドルを作成します。

これは、すべての角度モジュールがnpm(jspmではなく)を使用してインストールされているにもかかわらず、パラレル設定が必要でした。おそらくこれでもJSPMを使用することは可能ですが、私はまだそれについて検討していません。 JSPMとこのAoTクックブックは両方ともロールアップを使用するので、JSPMと統合されたngcコンパイラステップを得ることができますが、難しいのは、node_modulesではなくjspm_packagesを使用するようにすることです。

上記のリンクは、AoTで更新され、dev環境でもJSPMが使用されています。

答えて

5

この回答には次のような内訳が必要です。JSPM

V

SystemJS

JSPMは、本質的にJSPMがあなたのためにsystemjs.config.jsを設定する利点とSystemJSされます。私はJSPMがうまくいけばそれを愛しています(いつも悲しいことですが)。

ここでの利点は、JSPMがJSファイルをバンドルすることです。 JSPMが実際にこの質問は基本的に、我々はSystemJSまたはWebPACKのを使用する必要がありますされてボンネットの下SystemJSを使用していることを考えると

JSPMのV族のWebPACK

もう一度!私は

What are differences between SystemJS and Webpack?

その内容の簡単な繰り返しはWebPACKのは、それは単に彼らが冗長になりSystemJS(またはJSPM)を交換しないこと..ですここでは、この前(上の答えを)答えました。

ただし、ここではJSPMがバンドルを提供するという点で紆余曲折があります。だからなぜWebpackに移動するのですか?

JSPMの利点は設定が簡単なことです。

この同じ利点は、構成の容易さがオプションの欠如とオプションの欠如がコントロールの欠如を意味するという点で、その没落でもあります。

Webpackは、JSファイルをバンドルするだけでなく、CSS、HTMLなどを1つのbundle.jsファイルにまとめてバンドルします(一度キャッシュされると)Webpackアプリケーションは高速になりますが、最初は読み込みが遅くなります。

また、JSPMはバンドラの必要性を満たしていますが、JSPMを使用してファイルをトランスペアレントにする方法はありますか?例えばCSSの代わりにStylusを使用したいのであれば、私のStylusファイルをCSSに変換するのですか?私はGulpをミックスに投げ捨てるつもりです(これは、Webpackのダウンロードの1/3が6ヶ月前です)。またはWebpackに切り替えますか?

私は貧弱なドキュメントのためにWebpackのファンではありませんが、そのような巨大な市場シェアを持っているとすれば、私たちはすぐにWebpackのボートに飛び乗ると思います。

+0

更新された質問に記載されているように、AoTプロダクションビルドでwebpackの作業を行いましたか? –

+0

私は、私の会社のクライアントプロジェクトの1つでWebpackを開始しました.9ヶ月経ってもうまくいっています。このプロジェクトは今でも生きています。 Webpackをお楽しみください。 –

関連する問題