Web フロントエンド パッケージング ツールとは何ですか?

Web フロントエンド パッケージング ツールには次のものが含まれます。 1. Webpack。モジュール管理ツールおよびパッケージング ツールであり、さまざまなモジュールからのファイルをパッケージ化して統合し、それらの間の参照が正しく、実行が正常であることを確認します。整然とした; 2. Grunt、フロントエンドのパッケージ化および構築ツール; 3. Gulp、コードでパッケージング スクリプトを記述する; 4. Rollup、ES6 モジュラー パッケージング ツール; 5. Parcel、非常に高速な、構成不要の Web アプリケーション パッケージャー; 6. equireJS は、JS ファイルおよびモジュール ローダーです。

このチュートリアルの動作環境: Windows 7 システム、Dell G3 コンピューター。

Web フロントエンド パッケージング ツール

1. Webpack

Webpack:モジュール式管理ツールとパッケージ化ツール。その目的は、すべての静的リソースをパッケージ化できることです。さまざまなモジュールのファイルをパッケージ化して統合し、それらの間の参照が正しく、正常に実行されることを確認できます。 Webpack はアプリケーションを処理するときに、内部で依存関係グラフを構築し、プロジェクトに必要なすべてのモジュールをマップし、1 つ以上のバンドルを生成します。

ローダー変換により、CommonJs モジュール、AMD モジュール、ES6 モジュール、CSS、画像など、あらゆる形式のリソースをモジュールとみなすことができます。依存関係とルールに従って、実稼働環境の展開に適したフロントエンド リソースに多くの緩いモジュールをパッケージ化できます。オンデマンドでロードされるモジュールのコードを分離し、実際に必要なときに非同期でロードすることもできます。 Gulp/Grunt がビルド ツールであるのに対し、これはモジュール パッケージャーとして位置付けられます。 Webpack は Gulp/Grunt の一部の機能を置き換えることができますが、機能的なツールではないため、Webpack と組み合わせて使用​​できます。

Webpack は、一般的なモジュール オプションをすべてサポートしており、React 開発の代名詞となっています。 Webpack はモジュール バンドラーであると主張していますが、すでにユニバーサル タスク ランナーとして使用できます。

2. Grunt

Grunt: 最も古いパッケージング ツールです。設定のアイデアを使用してパッケージング スクリプトを作成します。すべてが設定されているため、オプション、src、dest などの項目。また、プラグインごとに独自の拡張フィールドを持つ場合があり、認知コストが高くつくため、使用する際には各種プラグインの設定ルールを理解する必要があります。

3. Gulp

Gulp: コードを使用してパッケージ化スクリプトを記述します。コードは流れるような方法で記述され、gulp.src、gulp.pipe のみが抽象化されます。 、gulp.dest、gulp.watch インターフェイスは非常に簡単に使用できます。 gulp を使用すると、習得と使用が容易になり、grunt に比べてコードの量を約半分に減らすことができます。 (追記: この紹介は gulp3 用であり、gulp4 では利用できません)

4、ロールアップ

ロールアップ: 次世代の ES6 モジュラー ツール、最大のハイライトはES6 モジュール設計を使用し、ツリーシェイクを使用してよりクリーンでシンプルなコードを生成します。一般に、アプリケーションには Webpack を使用し、クラス ライブラリには Rollup を使用します。コード分割 (コード分割) が必要な場合、多くの静的リソースを処理する必要がある場合、またはビルドされたプロジェクトに多くの CommonJS モジュール依存関係を導入する必要がある場合には、Webpack を使用します。コード ベースは ES6 モジュールに基づいており、ロールアップを使用して他の人がコードを直接使用できるようにしたいと考えています。

5. Parcel

Parcel は、「非常に高速な、構成不要の Web アプリケーション パッケージャー」です。 Webフロントエンド研修では、理論的な知識からプロジェクトの実践的な運用まで、モジュールパッケージ化ツールについて学び、真にフロントエンドツールの使い方を学ぶことができます。

Parcel には次の機能があります:

• 素早く

• プロジェクトのすべてのアセットをバンドルします

• コード分割が構成されていません

6、browserify

Browserify は Node.js が使用している CommonJS モジュールをサポートしています。すべてのモジュールは、単一のブラウザ互換ファイルにコンパイルされます。フローの考え方に基づいて設計されており、コマンドラインまたはAPIを通じて使用できます。 JavaScript のモジュール化の逆のプロセスのみを扱いますが、モジュール化のより良い開発を促進します。

7. RequireJS

RequireJS は、JavaScript ファイルおよびモジュール ローダーです。ブラウザ内での使用に最適化されていますが、Rhino や Node などの他の JavaScript 環境でも使用できます。 RequireJS のようなモジュール式スクリプト ローダーを使用すると、コードの速度と品質が向上します。

これらのフロントエンド モジュラー ツールの使用をマスターすると、作業がより簡単かつ効率的になり、モジュール化は現代のフロントエンド エンジニアにとって必須のスキルとなっています。

(学習ビデオ共有: Web フロントエンド )

以上がWeb フロントエンド パッケージング ツールとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。