使用 Esbuild 搭建 Vue 開發環境的指南

更新日期： 2025 年 1 月 1 日

Esbuild 是一款高效、輕量化的 JavaScript 打包工具，因其極快的打包速度和簡潔的設計而廣受歡迎。

然而，Esbuild 本身並不直接支援 Vue，需要通過插件來實現對 Vue 特有功能的支持。

本指南旨在幫助新手快速掌握如何配置 Esbuild 與 Vue，以建立高效的開發環境。

為什麼需要插件來支援 Vue？

Vue 的 .vue 文件需要特殊處理

Vue 的單文件組件（SFC, Single File Component）使用 .vue 文件格式，其中包含 <template>、<script> 和 <style> 三部分。

這種非標準 JavaScript 格式需要編譯器來轉換為可執行的 JavaScript。

模板需要編譯

Vue 的模板語法（<template>）需要被轉換為渲染函數，這需要使用 Vue 提供的編譯器（如 @vue/compiler-sfc）。

Esbuild 本身不處理這部分功能，需借助插件來完成。

專注於通用功能

Esbuild 專注於標準 JavaScript 和 TypeScript 文件的處理。

框架相關的功能支持由插件負責，這使 Esbuild 能保持輕量且高效。

開始搭建開發環境

以下是使用 Esbuild 與 Vue 搭建開發環境的完整步驟。

初始化專案

如果尚未初始化專案，可以執行以下指令建立 package.json 文件：

npm init -y

安裝必要的套件

安裝 Vue 和相關工具：

npm install vue vue-router @vue/compiler-sfc esbuild esbuild-plugin-vue3 --save-dev

• Vue 主程式：提供 Vue 的核心功能。
• Vue 編譯器：負責編譯 Vue 模板。
• Esbuild：高效的打包工具。
• Esbuild Vue 插件：處理 .vue 文件。

配置 Esbuild

為什麼需要配置文件？

雖然可以使用命令列執行簡單的打包，但對於稍微複雜的需求，例如多入口支持或插件配置，建議使用單獨的配置文件如 build.js 或 esbuild.config.js。

示例配置文件

創建一個名為 build.js 的文件，並添加以下內容：

const esbuild = require('esbuild');
const vuePlugin = require('esbuild-plugin-vue3');

// 檢查是否處於 watch 模式
const isWatch = process.argv.includes('--watch');

// 配置 Esbuild
const options = {
  entryPoints: ['./src/main.js'],  // 主入口文件
  bundle: true,                   // 打包為單一文件
  outfile: 'dist/bundle.js',      // 輸出位置
  plugins: [vuePlugin()],         // 使用 Vue 插件
  define: { 'process.env.NODE_ENV': '"production"' }, // 設定環境變數
  sourcemap: true,                // 生成源代碼映射
};

// 啟動打包
if (isWatch) {
  esbuild.context(options).then(ctx => {
    ctx.watch();
    console.log('Watching for changes...');
  });
} else {
  esbuild.build(options).then(() => console.log('Build complete!'));
}

配置文件的優勢

• 集中管理配置：避免命令列指令過於冗長。
• 支持進階功能：如條件邏輯、插件載入、自動化流程等。
• 提高可維護性：團隊協作時更易於理解和修改。

執行打包或開發模式

在 package.json 中新增以下指令：

"scripts": {
  "build": "node build.js",
  "dev": "node build.js --watch"
}

使用以下命令執行：

• 生產打包： npm run build
• 開發模式（自動偵測變更）： npm run dev

插件的作用

使用 esbuild-plugin-vue3 插件的目的是：

• 處理 .vue 文件：將 <template>、<script> 和 <style> 分別編譯並組合。
• 支持模板渲染函數：保證 Vue 的渲染功能正常運行。

總結

Esbuild 與 Vue 的結合展示了輕量化工具與插件系統的靈活性。

通過使用 esbuild-plugin-vue3，我們能高效處理 Vue 的單文件組件並享受極快的打包速度。

完成上述步驟後，您已具備一個高效的開發環境，可用於日常開發與生產部署。如果需要進一步優化，歡迎探討！