☰

NPM vs. Bower vs. Browserify vs. Gulp vs. Grunt vs. Webpack [closed] 質問する

tag-icon • tag-icon gruntjs npm gulp bower webpack
NPM vs. Bower vs. Browserify vs. Gulp vs. Grunt vs. Webpack [closed] 質問する

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

  • npm&bowerはパッケージ マネージャーです。依存関係をダウンロードするだけで、独自にプロジェクトをビルドする方法は知りません。知っているのは、すべての依存関係を取得した後でwebpack/ gulp/を呼び出すことです。grunt
  • bowerは に似ていますnpmが、平坦化された依存関係ツリーを構築します (npmが再帰的に行うのとは異なります)。つまり、 はnpm各依存関係の依存関係をフェッチしますが (同じものを数回フェッチする場合があります)、bowerはサブ依存関係を手動で含める必要があります。 と はbower、npmそれぞれフロントエンドとバックエンドで一緒に使用されることがあります (フロントエンドでは 1 メガバイトずつが重要になる可能性があるため)。
  • gruntgulp自動化できるものはすべて自動化するタスク ランナーです (つまり、CSS/Sass のコンパイル、画像の最適化、バンドルの作成、縮小/トランスパイルなど) 。
  • gruntvs. gulp(はmavenvs.gradleまたは構成 vs. コードに似ています)。Grunt は個別の独立したタスクの設定に基づいており、各タスクはファイルを開く/処理する/閉じます。Gulp は必要なコード量が少なく、Node ストリームに基づいているため、パイプ チェーンを構築でき (同じファイルを再度開くことなく)、高速化できます。
  • webpack( webpack-dev-server) - 私にとっては、変更をホット リロードするタスク ランナーであり、これによりすべての JS/CSS ウォッチャーを忘れることができます。
  • npm/ bower+ プラグインはタスク ランナーを置き換えることができます。それらの機能はしばしば重複するため、gulp/ を+ プラグインgruntよりも使用する必要がある場合は、異なる影響npmがあります。ただし、タスク ランナーは、複雑なタスク (例: 「ビルドごとにバンドルを作成し、ES6 から ES5 にトランスパイルし、すべてのブラウザー エミュレーターで実行し、スクリーンショットを作成し、FTP 経由で Dropbox にデプロイする」) には間違いなく適しています。
  • browserifyブラウザ用のノードモジュールをパッケージ化できます。vsbrowserifyは実際にnodeはrequireAMD 対 CommonJS。

質問:

  1. webpack&とは何ですかwebpack-dev-server?公式ドキュメントではモジュールバンドラーと書かれていますが、私にとっては単なるタスクランナーです。違いは何ですか?
  2. はどこで使用しますかbrowserify? node/ES6 インポートでも同じことはできないでしょうか?
  3. gulp/ gruntover npm+ プラグインはいつ使用しますか?
  4. Please provide examples when you need to use a combination

ベストアンサー1

Webpack and Browserify

Webpack and Browserify do pretty much the same job, which is processing your code to be used in a target environment (mainly browser, though you can target other environments like Node). Result of such processing is one or more bundles - assembled scripts suitable for targeted environment.

For example, let's say you wrote ES6 code divided into modules and want to be able to run it in a browser. If those modules are Node modules, the browser won't understand them since they exist only in the Node environment. ES6 modules also won't work in older browsers like IE11. Moreover, you might have used experimental language features (ES next proposals) that browsers don't implement yet so running such script would just throw errors. Tools like Webpack and Browserify solve these problems by translating such code to a form a browser is able to execute. On top of that, they make it possible to apply a huge variety of optimisations on those bundles.

However, Webpack and Browserify differ in many ways, Webpack offers many tools by default (e.g. code splitting), while Browserify can do this only after downloading plugins but using both leads to very similar results. It comes down to personal preference (Webpack is trendier). Btw, Webpack is not a task runner, it is just processor of your files (it processes them by so called loaders and plugins) and it can be run (among other ways) by a task runner.

Webpack Dev Server

Webpack Dev Server provides a similar solution to Browsersync - a development server where you can deploy your app rapidly as you are working on it, and verify your development progress immediately, with the dev server automatically refreshing the browser on code changes or even propagating changed code to browser without reloading with so called hot module replacement.

Task runners vs NPM scripts

I've been using Gulp for its conciseness and easy task writing, but have later found out I need neither Gulp nor Grunt at all. Everything I have ever needed could have been done using NPM scripts to run 3rd-party tools through their API. Choosing between Gulp, Grunt or NPM scripts depends on taste and experience of your team.

While tasks in Gulp or Grunt are easy to read even for people not so familiar with JS, it is yet another tool to require and learn and I personally prefer to narrow my dependencies and make things simple. On the other hand, replacing these tasks with the combination of NPM scripts and (propably JS) scripts which run those 3rd party tools (eg. Node script configuring and running rimraf for cleaning purposes) might be more challenging. But in the majority of cases, those three are equal in terms of their results.

Examples

As for the examples, I suggest you have a look at this 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クライアント側とサーバー側の両方のバンドルを作成し、エクスプレスサーバーを起動し、起動が成功した後にブラウザ同期を初期化します。これは、執筆時点では次のようになっています（反応スタータープロジェクト最新のコードについてはこちらをご覧ください。

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://ローカルホスト:3000、そしてBrowsersyncはサーバーを起動してリッスンしますhttp://ローカルホスト: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
});

ここでは、スターター キットと基本的に同じことを、今回はタスク ランナーを使用して行います。タスク ランナーはいくつかの問題を解決しますが、独自の問題があり、使用方法を学習する際にいくつかの困難が生じます。また、依存関係が多ければ多いほど、問題が発生する可能性も高くなります。そのため、私はこのようなツールを廃止したいと考えています。

おすすめ記事