2016-10-04 4 views
2

初心者のフロントエンド開発者はこちら。昔、サードパーティのjqueryプラグインを含めるには、通常は、ホストされているjs/cssファイルを参照する、HMTLに<script>タグを含めるという方法がありました。ホスティングされたjQueryプラグインとnpmパッケージの違いは何ですか?

npmパッケージでは、通常、npm install package_nameimport xx from 'package-name'を実行します。そして、物事をより混乱させるだけのWebpackもあります。私はwebpackを使用すると、サードパーティのjqueryプラグインを最終的なbundle.js出力にバンドルするはずがないことを知っています。デプロイされると、依存関係を解決するためにホストされたcss/jsファイルを使用することをお勧めしますか?

2つのアプローチの違いは何ですか?開発と展開のためのものですか?

答えて

0

違いは、ウェブ開発の新しい傾向はリソースの怠惰な負荷などの新しい要件を持っているということです。このため、htmlでスクリプトを含める従来の方法は、

1

サードパーティのモジュールをインポートするだけでなく、モジュール化されたコードを作成しやすくなり、コードを複数のファイルに分割するのに役立ちます。このパターンの利点は、依存関係をHTMLスクリプトで明示的に定義することによって、依存関係を手動で解決する必要がないことです。プロジェクトが成長しているときには、これらのファイルすべてを制御できなくなる可能性があります。それらを含める順序を混乱させ、最終的にすべてを破ります。インポートの場合、依存関係とは何かを関数内で定義し、htmlドキュメントにファイルを含める順序に依存しません。インポートは、まだすべてのブラウザからネイティブでサポートされています。バベルとウェブパックが場に出てくるところです。開発するとき、インポートはブラウザとノードが理解できる何かに翻訳されるべきであり、あなたはこれのためにbabelを使うことができます(Webpackではうまく動作しませんでしたが、おそらく同じことができます)。 BabelとWebpackは、依存関係を確実に解決し、ブラウザとノードが理解できる純粋なjavascriptにコンパイルされる別のjsファイルを作成します。 Webpackとbabelは、開発と展開の両方に使用する必要があります。

amdパターンとcommon.jsパターンのようなモジュールを含めるために使用できる他のパターンがあります(これはインポートに非常に似ています)。

関連する問題