Esbuild Bundlerの紹介

esbuild：ツールをすばやく構築し、Webpackの冗長性に別れを告げます！

EsBuildは、JavaScript、TypeScript、JSX、CSSコードを迅速に最適化できる高性能パッケージツールです。この記事では、esbuildをすばやく説明し、追加の依存関係なしに独自のビルドシステムを作成する方法を示します。

コアポイント：

• esbuildの効率：esbuildは、Webパックやロールアップなどの従来のツールよりもはるかに高速であり、JavaScript、TypeScript、JSX、CSSを効率的に処理できます。
• パッケージングの利点：Esbuildパッケージを使用すると、ツリーシャッキング、構文チェックをサポートし、単一のファイル出力を作成するため、パフォーマンスが向上します。
• 開発機能：esbuildはローカル開発サーバーをサポートし、ホットなリロード機能を備えており、手動で更新せずに開発できます。
• 構成の柔軟性：2つの構成方法を提供します：CLIとAPIは、さまざまな開発環境とワークフローに統合できます。
• 制限とメモ：esbuildは強力ですが、まだベータ段階にあり、タイプスクリプトタイプのチェックなどのいくつかの機能がありません。また、そのようなタスクを完了するには他のツールが必要です。
• 実用的なアプリケーション：この記事は、ESBUILDを効果的に構成して使用して開発と生産環境を構築する方法を示す実生活のプロジェクトの例を提供します。

esbuildはどのように機能しますか：

ViteのようなフレームワークはEsbuildを採用していますが、Esbuildを独自のプロジェクトでスタンドアロンツールとして使用することもできます。

• esbuildは、ロールアップなどのパッケージツールと同様の方法でJavaScriptコードを単一のファイルにパッケージ化します。これは、モジュールを解析するEsBuildの主な機能であり、構文の問題を報告し、「Tree-Shaking」は未使用の機能を削除し、ログとデバッガーステートメントを削除し、コードを圧縮し、ソースマッピングを提供します。
• esbuildパッケージCSSコードを単一のファイルに入れます。 SASSやPostCSSのような前処理店に完全に置き換わるわけではありませんが、Esbuildは部分コード、構文問題、ネスト、インラインリソースエンコード、ソースマッピング、自動プレフィックス、圧縮を処理できます。 これで十分かもしれません。
• esbuildは、自動パッケージとホットリロードを備えたローカル開発サーバーも提供するため、手動の更新は必要ありません。 BrowserSyncが提供するすべての機能はありませんが、ほとんどの場合に十分です。

次のコードは、Esbuildの概念を理解するのに役立ち、プロジェクトの構成の機会をさらに研究できるようにします。

なぜパックするのですか？

単一のファイルにコードを梱包することにはいくつかの利点があります：

• は、より小さく、より独立したソースファイルを開発し、メンテナンスを容易にすることができます。
• コードスタイルのチェック、コードフォーマット、構文チェックは、パッケージング中に実行できます。
• パッケージングツールは、未使用の関数を削除できます - tree -shakingと呼ばれます。
• 同じコードの異なるバージョンをパッケージ化し、古いブラウザー、node.js、denoなどのターゲットを作成できます。
• 単一のファイルは複数のファイルよりも速くロードされ、ブラウザはESモジュールサポートを必要としません。
• 生産レベルのパッケージは、コードを圧縮し、ログとデバッグステートメントを削除することにより、パフォーマンスを向上させることができます。

なぜesbuildを使用するのですか？

JavaScriptパッケージングツールとは異なり、EsBuildはコンパイルされたGO実行可能ファイルであり、多くの並列処理を実装しています。それは速く、ロールアップ、小包、またはウェブパックよりも100倍速いです。プロジェクトのライフサイクル中に数週間の開発時間を節約します。

さらに、esbuildは次のことも提供します

ビルトインJavaScript、TypeScript、JSXおよびCSSパッケージングおよびコンパイル機能。

• コマンドライン、JavaScript、およびGo Configuration API。
• esモジュールとcommonjsをサポートします。
• 監視モードとリアルタイムリロードを備えたローカル開発サーバー。
機能を追加するためのプラグイン。
完全なドキュメントとオンライン実験ツール。
• なぜesbuildの使用を避けないのですか？

執筆時点で、Esbuildはバージョン0.18に達しました。信頼できますが、それでもベータ製品です。

esbuildは頻繁に更新され、オプションが異なるバージョン間で変更される場合があります。ドキュメントでは、特定のバージョンに固執することを推奨しています。更新できますが、構成ファイルを移行して新しいドキュメントを掘り下げて大きな変更を発見する必要がある場合があります。

また、EsbuildはTypeScriptタイプのチェックを実行しないため、実行する必要があることに注意してください。

スーパークイックスタート：

tsc -noEmit

必要に応じて、開発依存関係としてESBUILDをローカルにインストールして、新しいnode.jsプロジェクトを作成します。

インストールには約9MBが必要です。次のコマンドを実行して機能するかどうかを確認して、インストールされているバージョンを表示します。

または次のコマンドを実行してCLIヘルプを表示します。

npm initCLI APIを使用して、エントリスクリプト（myApp.js）とそのすべてのインポートモジュールをbundle.jsという名前の単一のファイルにパッケージ化します。 esbuildは、デフォルトのブラウザ指向のインスタントコール関数式（IIFE）形式を使用してファイルを出力します：

<code class="language-bash">npm install esbuild --save-dev --save-exact</code>

node.jsを使用していない場合は、他の方法でesbuildをインストールできます。

<code class="language-bash">./node_modules/.bin/esbuild --version</code>

サンプルプロジェクト：

<code class="language-bash">./node_modules/.bin/esbuild --help</code>

GitHubからサンプルファイルとesbuild構成をダウンロードします。これはnode.jsプロジェクトなので、次のコマンドを使用して単一のesbuild依存関係をインストールします。

<code class="language-bash">./node_modules/.bin/esbuild myapp.js --bundle --outfile=bundle.js</code>

SRCのソースファイルをビルドディレクトリにビルドし、次のコマンドで開発サーバーを起動します。

さあ、ブラウザでLocalHost：8000に移動して、ライブクロックを表示するWebページを表示します。 SRC/CSS/またはSRC/CSS/PARTIALSでCSSファイルを更新すると、ESBUILDはコードを再梱包し、スタイルをリアルタイムでリロードします。

を押しますctrl | cmdc >サーバーを停止します。

次のコマンドを使用して、展開用の生産バージョンを作成します。

<code class="language-bash">npm install esbuild --save-dev --save-exact</code>

ビルドディレクトリ内のCSSおよびJavaScriptファイルを確認して、ソースマップなしで圧縮バージョンを表示します。

（そのようなコンテンツ、スペースの制限が原因で、元のテキストを参照するか、元のテキストに基づいて自分で要約してください。以下は、元のテキストの後続の部分のトピック要約です。キーを抽出できます。これらのトピックに基づいて元のテキストからの情報と擬似オリジナルになります）：

• プロジェクトの概要（プロジェクトの概要）：プロジェクト構造とスクリプトの説明。 package.json
• ESBUILD（ESBUILDの構成）の構成：パッケージターゲット、JavaScriptパッケージ、CSSパッケージなどを含むファイルの詳細な説明。 esbuild.config.js
• javaScript入力および出力ファイル（javaScript入力ファイルと出力ファイル）：、main.js、dom.jsなどを含むサンプルコード分析time.js
• cssパッケージ（cssバンドリング）：、main.css、variables.cssなどを含むCSSパッケージングの構成とサンプルコード分析。 elements.css
• 監視、再構築、サービス（監視、再構築、およびサービング）：開発サーバーとホットリロードの実装。
• 概要（概要）：esbuildの利点と短所の要約。
• faqs （esbuildに関するよくある質問（FAQ））：esbuildに関するFAQ。

擬似原産性の過程で、文は元の意味を変えることなく異なる式を提示するように、文の構造を調整し、同義語を置き換える必要があることを忘れないでください。 元のテキストを注意深く読んで、上記のトピックの概要に基づいて重要な情報を抽出してください。

以上がEsbuild Bundlerの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。