JavaScript構築ツールのBabel、Browserify、Webpack、Gront、Gulpはどうやって選択しますか?
4852 ワード
私たちは新しいJavaScriptプロジェクトを開始する時、私たちが考えるべき最初のことは先端のコンパイル環境を構築することです.しかし、多くのJavaScript構築ツールに直面している時、私たちはどうすればいいのか分かりません.どれが私たちに一番適しているのか分かりません.
想像してみてください.簡単な判断基準があれば、どのように違う項目に対して、異なる先端を選んでツールを構築するかを知ることができます.それは素晴らしいですか?実際に、自動でシステムを構築し、5年間のプロジェクト開発経験を積んだ後、下記のようにまとめました.私を信じて、それはあなたに異なる構築ツールの使用シーンを理解させることができます.
先入観が鋭い
あなたのプロジェクトがどのような構築ツールを使うべきかを判断するのは簡単です.プロジェクトであれば、ES 6コンパイラに基づいて ができます.単一ページアプリケーションであれば、モジュールパッケージング が必要です.あなたのプロジェクトが生産環境に配置されている場合、上記以外にも、自動的に実行できるオペレータ が必要です.
以下は私のおすすめの先端構築ツールです. Babelを使用して、適応ES 6コード をコンパイルすることができます. Webpackを使用すると、JavaScriptファイルおよびその関連する依存性を包装することができます. Gulpを使用して、ファイルの大量名を自動化し、静的リソースファイルのキャッシュ を更新することができる.
では、問題が来ました.先端構築ツールが多いのに、なぜ上記のようなものがオススメですか?
根源を究める
多くの流行のJavaScript構築ツールを分析し、それぞれの長所と短所を見つけました.コンパイラがどうしても必要なのなら、コンパイラから話しましょう.
コンパイラ
ES 5版のJavaScriptはそんなに優雅ではありません.ES 6とES 7は非常に向上しましたが、現在のブラウザではES 6とES 7はサポートされていません.
幸いにも、多くのエンジニアが
ベベル
この文章を読んでから、もしツールを使うことを学んでいなければならないなら、このツールはきっと
BabelはJavaScriptコードの変換において十分に優れていますが、それ以外は何もしてくれません.実際には、ES 6の
モジュールパッキング
多くのプロジェクトは、どんなに規模が大きくても、プログラマはコードを複数のファイルに分割することに慣れています.
私たちはネットでたくさんのモジュールパッケージングを見つけられますが、二つだけが代表的です.BrowserifyとWebpackです.
Browserify
Browserifyは、Node packagesがブラウザのサポートを得ることができます.もちろん、WebアプリケーションをNode Packagesにパッケージ化するのも手伝ってくれます.
このNodeを中心とした哲学は、多くの利点があります.Browserifyを使ってアプリケーションを包装するのはとても簡単です.Node内蔵のモジュールを使ってもいいです.例えば
このような問題があっても、この問題は解決できないわけではない.多くの人が既にプラグインを書いていますので、Browserifyはこれらの資源を包装できます.これらのプラグインは、ES 6からES 5への変換、CSSのパッケージ化、コードを複数のファイルに分離することなどができます.しかし、これらのプラグインがBrowserifyというツールの設計目的に反していることを考慮して、配置が混乱します.
したがって、Browserifyは、Node Packagesをブラウザサポート形式に上品にパッケージ化できるツールであるが、もしあなたが書いているのが単一ページアプリケーションであれば、特別にパッケージ化し、すべてのリソースファイルをパッケージ化できるモジュールパッケージング器を選択してください.
Webpack
Webpackは多くのJavaScriptモジュールとその関連する依存性を個々のファイルにパッケージ化できるツールです.これらのモジュールの依存性を具体的に示す必要はありません.JavaScriptモジュールに包装すればいいです.
JavaScriptモジュールに包装すればいいですか?これはCSSと画像をサポートしないということですか?もちろん違います.Webpackは様々なloadersを通じて様々なリソースファイルをJavaScriptモジュールに変換できる神器です.
Loadersは、異なるリソースファイルを処理することができる変換器である.これらはいかなる形式の資源ファイルを受信しても、JavaScriptだけでなく、いかなる形式の資源ファイルを出力することができます.また、このような操作はチェーンでもできます.SCSSファイルをCSSに変換してから、CSSをJavaScriptモジュールに変換することができます.そして、WebpackはこれらのJavaScriptモジュールをまとめて包装します.
Webpackに何か欠点があるといえば、開発者が怖がるWebpackの複雑な配置ファイルが多く含まれている人気のケースです.私のconfigling Webpack with Babel in 26 lineas教程に従ってすれば、この問題を解決するのはこのようなso easeであることが分かります.
上記の分析を経て、モジュールパッケージングを使って一連の静的リソースファイルを生成する方法を知るべきです.これらの書類があったら、どうすればいいですか?これがこのタスクの運転器の役割を果たす時です.
タスクライタ
タスク実行器は、タスクを定義して実行するためのツールです.簡単に言えば、コマンドラインで実行できる操作は、タスク実行器で行うことができます.
タスクマネージャを使う前に、この言葉を理解することが大切です.タスクを作成するためにタスクを作成しないでください.つまり、自分でタスクを作ってモジュールを梱包すればいいです.でも、このことをWebpackに任せたら、Webpackを起動してもいいです.私たちは車輪を繰り返す必要はありません.
モジュールパッキングができないタスクのいくつかを作成することが必要です.例えば、モジュールパッキングのために自動的に生成された静的リソースファイルは、ウェブページに
グランド
Grountはあなたが以前定義したタスクを実行するツールです.つまり、タスクを定義しないと、Grantはあなたのために何もできないということです.
理由は、GrontのタスクはJavaScriptのコードを使って定義されるのではなく、一連の構成オブジェクトを通して声明的に定義されるからです.Grountコアパケットのサイズを維持するために、そのすべての構成オブジェクトはプラグイン化されています.監視ファイルからコピー、直列ファイルに変化します.
このようなやり方にも利点があります.Grauntには何千何万ものプラグインがあります.基本的にコードを書く必要はありません.さまざまな需要に対して、一つを選んで、直接に使えばいいです.最大の問題は、確かにプラグインの効果を微調整する必要があると感じるなら、純粋なJavaScriptコードを書くことによっては実現できません.このためにGuntプラグインを再作成しなければなりません.
Gulp
GulpはGuntのようなもので、タスクを定義して実行するためのツールです.
GrountとGulpの最大の違いは、Grontが設定オブジェクトを使ってタスクの動作を宣言することであり、GulpはJavaScriptの関数を使ってタスクを定義することである.GulpはJavaScriptが戻るstremsやpromisesをどのように処理するかを知っているからこそ、あなたはタスクを作成する時に大きな柔軟性を持っています.
GulpはGuntと同様に、非常に豊富なプラグインライブラリを持っています.ただし、Gulpのプラグインは元の機能を提供しています.Nodeモジュールを参照して、Gulpタスクシステムを充実させることもできます.
Gulpの最大の問題は
James K Nelson、http://jamesknelson.com/which-build-system-should-i-use-for-my-javascript-app/
想像してみてください.簡単な判断基準があれば、どのように違う項目に対して、異なる先端を選んでツールを構築するかを知ることができます.それは素晴らしいですか?実際に、自動でシステムを構築し、5年間のプロジェクト開発経験を積んだ後、下記のようにまとめました.私を信じて、それはあなたに異なる構築ツールの使用シーンを理解させることができます.
先入観が鋭い
あなたのプロジェクトがどのような構築ツールを使うべきかを判断するのは簡単です.
以下は私のおすすめの先端構築ツールです.
では、問題が来ました.先端構築ツールが多いのに、なぜ上記のようなものがオススメですか?
根源を究める
多くの流行のJavaScript構築ツールを分析し、それぞれの長所と短所を見つけました.コンパイラがどうしても必要なのなら、コンパイラから話しましょう.
コンパイラ
ES 5版のJavaScriptはそんなに優雅ではありません.ES 6とES 7は非常に向上しましたが、現在のブラウザではES 6とES 7はサポートされていません.
幸いにも、多くのエンジニアが
JavaScript を JavaScript に変換できるツールを作っています.さらにその上に、新しい特性と機能、例えばマイクロソフトのType Scriptを入れています.しかし、多くのJavaScriptコンパイラの中で、JavaScriptに最も近い公式コードのスタイルを選ぶなら、Babelはきっと一番優れています.ベベル
この文章を読んでから、もしツールを使うことを学んでいなければならないなら、このツールはきっと
Babelです.Babelの機能は、あなたが期待しているように、ES 6コードをブラウザがサポートするES 5コードに変換するだけです.もう一つのポイントは、Babelが持っている変換器の上に、カスタマイズして自分の変換器にすることを許可します.嬉しいことに、Babelのコミュニティは変換器の面で、すでにたくさん提供してくれました.さらに、ES 7の特性は、例えばasync／awaitおよびdecoratorsに変換することができる.同時に、React JSXに対するサポートも提供しています.BabelはJavaScriptコードの変換において十分に優れていますが、それ以外は何もしてくれません.実際には、ES 6の
importおよびexportの表現によって、複数のファイルを統合することはできません.これもなぜですか?私たちはこれからモジュールパッキングが必要です.モジュールパッキング
多くのプロジェクトは、どんなに規模が大きくても、プログラマはコードを複数のファイルに分割することに慣れています.
scriptタグを使用して、これらの個別のjsファイルを導入してもいいですが、やはり異なるファイルの依存関係に基づいて、それらの導入の順序を決定する必要があります.この件に関して、ツールはあなたよりもっとよくできます.つまり、モジュールパッキングを使って、いくつかのファイルを自動的に個別のファイルに包装する必要がある理由です.私たちはネットでたくさんのモジュールパッケージングを見つけられますが、二つだけが代表的です.BrowserifyとWebpackです.
Browserify
Browserifyは、Node packagesがブラウザのサポートを得ることができます.もちろん、WebアプリケーションをNode Packagesにパッケージ化するのも手伝ってくれます.
このNodeを中心とした哲学は、多くの利点があります.Browserifyを使ってアプリケーションを包装するのはとても簡単です.Node内蔵のモジュールを使ってもいいです.例えば
path、Nodeプロジェクトに書いたコードを引用してもいいです.もちろん、欠点は、あなたの1ページのアプリケーションには通常必要なリソースがあります.このような問題があっても、この問題は解決できないわけではない.多くの人が既にプラグインを書いていますので、Browserifyはこれらの資源を包装できます.これらのプラグインは、ES 6からES 5への変換、CSSのパッケージ化、コードを複数のファイルに分離することなどができます.しかし、これらのプラグインがBrowserifyというツールの設計目的に反していることを考慮して、配置が混乱します.
したがって、Browserifyは、Node Packagesをブラウザサポート形式に上品にパッケージ化できるツールであるが、もしあなたが書いているのが単一ページアプリケーションであれば、特別にパッケージ化し、すべてのリソースファイルをパッケージ化できるモジュールパッケージング器を選択してください.
Webpack
Webpackは多くのJavaScriptモジュールとその関連する依存性を個々のファイルにパッケージ化できるツールです.これらのモジュールの依存性を具体的に示す必要はありません.JavaScriptモジュールに包装すればいいです.
JavaScriptモジュールに包装すればいいですか?これはCSSと画像をサポートしないということですか?もちろん違います.Webpackは様々なloadersを通じて様々なリソースファイルをJavaScriptモジュールに変換できる神器です.
Loadersは、異なるリソースファイルを処理することができる変換器である.これらはいかなる形式の資源ファイルを受信しても、JavaScriptだけでなく、いかなる形式の資源ファイルを出力することができます.また、このような操作はチェーンでもできます.SCSSファイルをCSSに変換してから、CSSをJavaScriptモジュールに変換することができます.そして、WebpackはこれらのJavaScriptモジュールをまとめて包装します.
Webpackに何か欠点があるといえば、開発者が怖がるWebpackの複雑な配置ファイルが多く含まれている人気のケースです.私のconfigling Webpack with Babel in 26 lineas教程に従ってすれば、この問題を解決するのはこのようなso easeであることが分かります.
上記の分析を経て、モジュールパッケージングを使って一連の静的リソースファイルを生成する方法を知るべきです.これらの書類があったら、どうすればいいですか?これがこのタスクの運転器の役割を果たす時です.
タスクライタ
タスク実行器は、タスクを定義して実行するためのツールです.簡単に言えば、コマンドラインで実行できる操作は、タスク実行器で行うことができます.
タスクマネージャを使う前に、この言葉を理解することが大切です.タスクを作成するためにタスクを作成しないでください.つまり、自分でタスクを作ってモジュールを梱包すればいいです.でも、このことをWebpackに任せたら、Webpackを起動してもいいです.私たちは車輪を繰り返す必要はありません.
モジュールパッキングができないタスクのいくつかを作成することが必要です.例えば、モジュールパッキングのために自動的に生成された静的リソースファイルは、ウェブページに
scriptタグを挿入します.グランド
Grountはあなたが以前定義したタスクを実行するツールです.つまり、タスクを定義しないと、Grantはあなたのために何もできないということです.
理由は、GrontのタスクはJavaScriptのコードを使って定義されるのではなく、一連の構成オブジェクトを通して声明的に定義されるからです.Grountコアパケットのサイズを維持するために、そのすべての構成オブジェクトはプラグイン化されています.監視ファイルからコピー、直列ファイルに変化します.
このようなやり方にも利点があります.Grauntには何千何万ものプラグインがあります.基本的にコードを書く必要はありません.さまざまな需要に対して、一つを選んで、直接に使えばいいです.最大の問題は、確かにプラグインの効果を微調整する必要があると感じるなら、純粋なJavaScriptコードを書くことによっては実現できません.このためにGuntプラグインを再作成しなければなりません.
Gulp
GulpはGuntのようなもので、タスクを定義して実行するためのツールです.
GrountとGulpの最大の違いは、Grontが設定オブジェクトを使ってタスクの動作を宣言することであり、GulpはJavaScriptの関数を使ってタスクを定義することである.GulpはJavaScriptが戻るstremsやpromisesをどのように処理するかを知っているからこそ、あなたはタスクを作成する時に大きな柔軟性を持っています.
GulpはGuntと同様に、非常に豊富なプラグインライブラリを持っています.ただし、Gulpのプラグインは元の機能を提供しています.Nodeモジュールを参照して、Gulpタスクシステムを充実させることもできます.
Gulpの最大の問題は
streamsとpromisesとのドッキングが初心者にとって難しいかもしれないことです.しかし、これは両刃の剣でもあります.経験を積むにつれて、streamsとpromisesの長所を知ることができます.James K Nelson、http://jamesknelson.com/which-build-system-should-i-use-for-my-javascript-app/