[解決済み] NPM vs. Bower vs. Browserify vs. Gulp vs. Grunt vs. Webpack [終了しました]。

質問

最も人気のあるJavaScriptのパッケージマネージャ、バンドル、タスクランナーについて、私の知識をまとめてみました。間違っていたら訂正してください。

• npm & bower はパッケージマネージャです。彼らは依存関係をダウンロードするだけで、自分自身でプロジェクトをビルドする方法は知りません。彼らが知っているのは webpack / gulp / grunt すべての依存関係を取得した後
• bower は npm とは異なり、平坦化された依存関係ツリーを構築します)。 npm は再帰的に行う)。意味 npm は依存関係ごとに依存関係を取得しますが（同じものを数回取得することもあります）、一方 bower は、サブディペンデンシーを手動でインクルードすることを想定しています。時には bower と npm は、フロントエンドとバックエンドでそれぞれ一緒に使われます (フロントエンドでは 1 メガバイトが重要になることがあるからです)。
• grunt と gulp は、自動化できるものはすべて自動化するためのタスクランナーです（CSS/Sassのコンパイル、画像の最適化、バンドルの作成、minify/transpileなど）。
• grunt vs. gulp (のようなものです）。 maven vs. gradle または設定対コード)。Gruntは、独立したタスクの設定に基づいており、各タスクはファイルを開いたり、処理したり、閉じたりする。Gulpは、より少ないコード量で、Nodeストリームをベースにしているので、パイプチェーンを構築することができ、（同じファイルを再度開くことなく）より高速に動作することができます。
• webpack ( webpack-dev-server ) - 私にとっては、すべてのJS/CSSウォッチャーを忘れることができる、変更点のホットリロードを備えたタスクランナーです。
• npm / bower タスクランナーの代わりに + プラグインを使用することもできます。これらの能力はしばしば交差するため、もし gulp / grunt オーバー npm +プラグインです。しかし、タスクランナーは複雑なタスク（例えば、"各ビルドでバンドルを作成し、ES6からES5にトランスパイルし、すべてのブラウザのエミュレータで実行し、スクリーンショットを作成してFTPでdropboxにデプロイする"）には確実に優れています。
• browserify は、ブラウザ用のノードモジュールのパッケージングを可能にします。 browserify 対 node 's require は実際には AMDとCommonJSの比較 .

質問

1. とは何ですか？ webpack &です。 webpack-dev-server ? 公式ドキュメントではモジュールバンドルラーとなっていますが、私にとっては単なるタスクランナーです。 何が違うんですか？
2. どこで使うか browserify ? node/ES6のインポートで同じことはできないのでしょうか？
3. どのような場合に gulp / grunt オーバー npm +プラグイン？
4. 組み合わせが必要な場合の例を教えてください。

解決方法は？

WebpackとBrowserify

WebpackとBrowserifyはほとんど同じ仕事をします、つまり ターゲット環境で使用するためのコード処理 (主にブラウザですが、Nodeのような他の環境をターゲットにすることもできます）。このような処理の結果は、1つまたは複数の バンドル - は、対象となる環境に適したスクリプトを組み立てたものです。

例えば、ES6のコードをモジュールに分割して書き、それをブラウザ上で実行できるようにしたいとします。そのモジュールがNodeモジュールであった場合、Node環境にしか存在しないため、ブラウザはそれを理解することができません。また、IE11のような古いブラウザでは、ES6モジュールは動きません。さらに、ブラウザがまだ実装していない実験的な言語機能（ES next proposals）を使っている場合もあり、そのようなスクリプトを実行しても、エラーを出すだけです。WebpackやBrowserifyのようなツールは、これらの問題を次のように解決します。 そのコードをブラウザが実行できる形に変換すること . さらに、これらのバンドルに対して、非常に多様な最適化を適用することができます。

しかし、WebpackとBrowserifyは多くの点で異なっており、Webpackはデフォルトで多くのツール（例えばコード分割など）を提供していますが、Browserifyはプラグインをダウンロードしないとできませんが 両方を使用すると、非常に似たような結果になる . これは個人の好みによります（Webpackの方がトレンドです）。Webpackはタスクランナーではなく、ファイルを処理するものです（いわゆるローダーやプラグインによって処理されます）。

ウェブパックデバイスサーバー

Webpack Dev ServerはBrowsersyncと同様のソリューションを提供します。開発サーバーでは、作業中にアプリを迅速にデプロイし、開発の進捗をすぐに確認できます。開発サーバーでは、コードの変更時に自動的にブラウザを更新したり、いわゆるホットモジュール置換によってリロードせずに変更したコードをブラウザに伝搬させることさえ可能です。

タスクランナー vs NPMスクリプト

簡潔でタスクが書きやすいという理由でGulpを使ってきたが、後になってGulpもGruntも全く必要ないことが分かった。NPMスクリプトを使って、サードパーティのツールをAPI経由で実行することで、必要なことはすべて済んでしまうのだ。 Gulp、Grunt、NPMスクリプトのどれを選ぶかは、あなたのチームの好みと経験によります。

GulpやGruntのタスクは、JSにあまり詳しくない人でも見やすいのですが、また別のツールが必要になり、学習が必要です。個人的には、依存関係を狭めてシンプルにするのが好きです。一方、これらのタスクを、NPMスクリプトと、それらのサードパーティツールを実行する（おそらくJS）スクリプトの組み合わせに置き換えることもできます（例：Nodeスクリプトで リムラフ 掃除のために）もっと難しいかもしれません。しかし、大半の場合 この3つは、結果としては同等です。

事例紹介

例として、次のものをご覧ください。 Reactスタータープロジェクト このスクリプトは、ビルドとデプロイのプロセス全体をカバーする、NPMとJSスクリプトの素晴らしい組み合わせを示しています。これらのNPMスクリプトは package.json という名前のプロパティで、ルートフォルダ内の scripts . そこでは、ほとんどの場合、次のようなコマンドに遭遇します。 babel-node tools/run start . Babel-nodeはCLIツール（実稼働用ではない）で、まずES6ファイルをコンパイルします。 tools/run (にあるrun.jsファイル）。 ツール ) - 基本的にはランナーユーティリティです。このランナーは関数を引数として受け取り、それを実行します。この場合、関数は start - 別のユーティリティ ( start.js ) ソースファイル (クライアントとサーバーの両方) をバンドルし、アプリケーションと開発サーバー (開発サーバーはおそらく Webpack Dev Server か Browsersync のどちらか) を起動する役割を果たします。

より正確に言えば start.js は、クライアント側とサーバー側の両方のバンドルを作成し、expressサーバーを起動し、正常に起動した後にBrowser-syncを初期化するもので、執筆時点では以下のようなものでした( リアクトスタータープロジェクト は最新のコードです）。

const bs = Browsersync.create();  
bs.init({
      ...(DEBUG ? {} : { notify: false, ui: false }),

      proxy: {
        target: host,
        middleware: [wpMiddleware, ...hotMiddlewares],
      },

      // no need to watch '*.js' here, webpack will take care of it for us,
      // including full page reloads if HMR won't work
      files: ['build/content/**/*.*'],
}, resolve)

重要な部分は proxy.target で、プロキシしたいサーバーのアドレスを設定します。 http://localhost:3000 でリスンしているサーバを起動します。 http://localhost:3001 生成されたアセットは、自動的な変更検出とホットモジュールの置き換えによって提供されます。ご覧のように、もうひとつの設定プロパティである files Browser-sync は変更を監視し、変更があればブラウザを再読み込みしますが、コメントにあるように、Webpack は HMR で js ソースの監視を自ら行うので、そこで連携しています。

GruntやGulpの設定に相当する例はありませんが、Gulpの場合（Gruntの場合も多少似ています）、gulpfile.jsに以下のように個々のタスクを記述します。

gulp.task('bundle', function() {
  // bundling source files with some gulp plugins like gulp-webpack maybe
});

gulp.task('start', function() {
  // starting server and stuff
});

これはいくつかの問題を解決してくれますが、独自の問題や使い方を学ぶ上での難しさがあります。だから、私はこのようなツールは使わないことにしています。