Esbuild Bundler的簡介

esbuild：快速構建工具，告別Webpack冗餘！

esbuild是一個高性能的打包工具，能夠快速優化JavaScript、TypeScript、JSX和CSS代碼。本文將引導您快速上手esbuild，並展示如何在無需其他依賴的情況下創建自己的構建系統。

核心要點：

• esbuild效率： esbuild憑藉其多核處理能力，比Webpack或Rollup等傳統工具快得多，能夠高效處理JavaScript、TypeScript、JSX和CSS。
• 打包優勢： 使用esbuild打包可以提高性能，因為它支持tree-shaking、語法檢查，並能創建單個文件輸出，從而加快加載速度並簡化維護。
• 開發特性： esbuild支持本地開發服務器，並具有熱重載功能，無需手動刷新即可進行開發。
• 配置靈活性： 提供CLI和API兩種配置方式，可以集成到各種開發環境和工作流程中。
• 局限性和注意事項： 雖然esbuild功能強大，但它仍處於測試階段，缺少一些功能，例如TypeScript類型檢查，需要其他工具來完成此類任務。
• 實際應用： 本文提供了一個真實的項目示例，演示瞭如何有效地配置和使用esbuild來構建開發和生產環境。

esbuild的工作原理：

Vite等框架已經採用了esbuild，但您也可以在自己的項目中將esbuild用作獨立工具。

• esbuild將JavaScript代碼打包到單個文件中，其方式類似於Rollup等打包工具。這是esbuild的主要功能，它可以解析模塊、報告語法問題、“tree-shaking”去除未使用的函數、刪除日誌和調試器語句、壓縮代碼並提供源映射。
• esbuild將CSS代碼打包到單個文件中。它不能完全替代Sass或PostCSS等預處理器，但esbuild可以處理部分代碼、語法問題、嵌套、內聯資源編碼、源映射、自動前綴和壓縮。 這可能就足夠了。
• esbuild還提供了一個本地開發服務器，具有自動打包和熱重載功能，因此無需手動刷新。它不具備Browsersync提供的所有功能，但對於大多數情況來說已經足夠了。

以下代碼將幫助您理解esbuild的概念，以便您可以進一步研究項目的配置機會。

為什麼要打包？

將代碼打包到單個文件中具有多種好處：

• 可以開發更小、更獨立的源文件，更容易維護。
• 可以在打包過程中進行代碼風格檢查、代碼格式化和語法檢查。
• 打包工具可以刪除未使用的函數——稱為tree-shaking。
• 可以打包同一代碼的不同版本，並為舊版瀏覽器、Node.js、Deno等創建目標。
• 單個文件加載速度比多個文件快，瀏覽器不需要ES模塊支持。
• 生產級打包可以通過壓縮代碼和刪除日誌和調試語句來提高性能。

為什麼要使用esbuild？

與JavaScript打包工具不同，esbuild是一個編譯後的Go可執行文件，它實現了大量的並行處理。它速度很快，比Rollup、Parcel或Webpack快一百倍。它可以節省項目生命週期中數週的開發時間。

此外，esbuild還提供：

• 內置的JavaScript、TypeScript、JSX和CSS打包和編譯功能。
• 命令行、JavaScript和Go配置API。
• 支持ES模塊和CommonJS。
• 帶有監視模式和實時重載的本地開發服務器。
• 用於添加更多功能的插件。
• 完整的文檔和在線實驗工具。

為什麼要避免使用esbuild？

在撰寫本文時，esbuild已達到0.18版本。它很可靠，但仍然是測試版產品。

esbuild經常更新，不同版本之間的選項可能會發生變化。文檔建議您堅持使用特定版本。您可以更新它，但是您可能需要遷移配置文件並深入研究新文檔以發現重大更改。

還要注意，esbuild不執行TypeScript類型檢查，因此您仍然需要運行tsc -noEmit。

超快速入門：

如有必要，使用npm init創建一個新的Node.js項目，然後將esbuild作為開發依賴項本地安裝：

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

安裝大約需要9MB。通過運行以下命令查看已安裝的版本來檢查它是否有效：

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

或者運行以下命令查看CLI幫助：

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

使用CLI API將入口腳本（myapp.js）及其所有導入的模塊打包到名為bundle.js的單個文件中。 esbuild將使用默認的、面向瀏覽器的、立即調用的函數表達式（IIFE）格式輸出文件：

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

如果您不使用Node.js，則可以通過其他方式安裝esbuild。

示例項目：

從Github下載示例文件和esbuild配置。這是一個Node.js項目，因此使用以下命令安裝單個esbuild依賴項：

<code class="language-bash">npm install</code>

將src中的源文件構建到build目錄中，並使用以下命令啟動開發服務器：

<code class="language-bash">npm start</code>

現在，在瀏覽器中導航到localhost:8000以查看顯示實時時鐘的網頁。當您更新src/css/或src/css/partials中的任何CSS文件時，esbuild將重新打包代碼並實時重新加載樣式。

按Ctrl|Cmd C停止服務器。

使用以下命令創建用於部署的生產版本：

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

檢查build目錄中的CSS和JavaScript文件以查看沒有源映射的壓縮版本。

(後續內容，由於篇幅限制，請參考原文或自行根據原文進行概括總結。 以下為原文後續部分的主題概要，您可以根據這些主題從原文中提取關鍵信息並進行偽原創) :

• 項目概述 (Project Overview): 項目結構和package.json腳本解釋。
• 配置esbuild(Configuring esbuild): esbuild.config.js文件詳解，包括打包目標、JavaScript打包、CSS打包等。
• JavaScript輸入和輸出文件(JavaScript input and output files): 示例代碼分析，包括main.js, dom.js, time.js等。
• CSS打包(CSS Bundling): CSS打包配置和示例代碼分析，包括main.css, variables.css, elements.css等。
• 監視、重建和服務(Watching, Rebuilding, and Serving): 開發服務器和熱重載實現。
• 總結(Summary): esbuild的優缺點總結。
• 常見問題解答(Frequently Asked Questions (FAQs) about ESBuild): 關於esbuild的常見問題解答。

記住，在偽原創過程中，需要調整語句結構、替換同義詞等，使文章在不改變原意的情況下呈現出不同的表達方式。 請務必仔細閱讀原文，並根據以上主題概要提取關鍵信息進行改寫。

以上是Esbuild Bundler的簡介的詳細內容。更多資訊請關注PHP中文網其他相關文章！