フロントエンドビルドツールを理解する
少量注文
最近、「Explain the Simple Webpack」を見ました。その知識のポイントをいくつか整理しますので、お読みください。
ビルドツール、ビルドに含まれるもの
- コード変換：TypeScriptをJavaScriptにコンパイルし、scssをcssにコンパイルします。
- ファイルの最適化：JavaScript、css、HTバードコードの圧縮、画像の圧縮とマージなど。
- コードセグメンテーション：複数のページの共通コードを抽出し、コードの一部を実行せずに最初の画面を抽出して、非同期でロードします。
- モジュールのマージ：モジュラープロジェクトには多くのモジュールとファイルがあり、モジュールを分類して、構築機能を使用して1つのファイルにマージする必要があります。
- 自動更新：ローカルソースコードの変更を監視し、ブラウザを自動的に再構築して更新します。
- コード検証：コードを倉庫に提出する前に、コードが仕様に準拠しているかどうか、および単体テストに合格しているかどうかを検証する必要があります。
- 自動リリース：コードが更新された後、オンラインリリースコードが自動的に作成され、リリースシステムに送信されます
ビルドツールの例と比較
- Npm Scriptの利点は組み込まれており、他の依存関係をインストールする必要はありません。欠点は、関数が単純すぎることです
- Gruntは、依存タスクを自動的に実行します。各タスクの特定の実行コードと依存関係は、構成ファイルGruntfile.jsに書き込まれます。Gruntの利点は次のとおりです。–
柔軟性があり、ユーザーが定義したタスクの実行のみを担当します。–
多数再利用可能なプラグインは、一般的なビルドタスクをカプセル化します。
– Gruntの欠点は、高度に統合されておらず、多くの構成を記述した後に使用でき、そのままでは使用できないことです。
– Gruntは、NpmScriptの欠点を補うために実際に生まれたNpmScriptの進化版に相当します。 - Gulp（http://gulpjs.com）は、ストリームベースの自動ビルドツールです。タスクの管理と実行に加えて、ファイルの監視、ファイルの読み取りと書き込みもサポートします
– 5つのビルドシナリオ：–gulp.taskを介し
てタスク
を登録します;
– gulp.runを介してタスクを実行します; –gulp.watchを介してファイルの変更を監視します;
–パスgulp.srcはファイルを読み取ります：-gulp.destを介してファイル
を書き込みます。
– Gulpの利点は、使いやすく柔軟性があることです。単独で構築することも、他のツールと一緒に使用することもできます。その欠点はGruntに似ており、統合性は高くなく、多くの構成を書き込んだ後に使用でき、そのままでは使用できません。 - Fis3は、一般的な構築機能をWeb開発に統合します
- Webpackは、モジュラーJavaScriptをパッケージ化するためのツールです。Webpackでは、すべてのファイルがモジュールです。ローダーはファイルを変換し、プラグインはフックを挿入し、最後に複数のモジュールで構成されるファイルを出力します。
– Webpackの利点は、箱から出して1つのステップで使用できるモジュラープロジェクトの処理に重点を置いています。–
柔軟性を失うことなく完全で使いやすいプラグインによって拡張できます。–
使用シナリオは制限されません。 Web開発へ：
–コミュニティは巨大で活発であり、時代の発展に対応する新機能が頻繁に導入され、ほとんどのシナリオで既存のオープンソース拡張機能を見つけることができます
。-優れた開発経験。
-Webpackの欠点は、モジュラー開発を採用するプロジェクトにしか使用できないことです。 - Rollupは、Webpackに似ていますが、ES6に焦点を当てたモジュールパッケージツールです。ES6ソースコードのツリーシェイクを実行して、定義されているが使用されていないコードを削除し、スコープホイストを実行して出力ファイルのサイズを縮小して改善できます。パフォーマンス
感謝
勉強に役立ったと感じたら、必要な人と共有したり、励ましてください。よろしくお願いします
。今後も更新していきます。。。