使用 Esbuild 實現 Django 中的靜態資源管理與優化
更新日期： 2024 年 12 月 1 日
本文為 Django 與前端框架教學，第 1 篇：
- 使用 Esbuild 實現 Django 中的靜態資源管理與優化 👈 所在位置
- 使用 HTMX 實現 Django 頁面不刷新交互效果
- 使用 HTMX 完成刪除功能的邏輯解析
- 使用 Tailwind CSS 和 Shared Template 設計 Django 項目導航欄與樣式
建議閱讀本文前，先閱讀完 Django 高階教學 系列文
在 Django 中，如果想要提升前端資源的管理效率，並整合現代化的工具鏈（如 Esbuild），可以使用以下方法來優化 JavaScript 的打包和載入過程。
前言：為什麼選擇 Esbuild？
Esbuild 是一款高效的 JavaScript 打包工具，擁有以下特點：
- 快速打包：比傳統工具（如 Webpack）更快。
- 支援現代語法：如 ES6 模組、TypeScript 等。
- Tree Shaking：移除未使用的代碼，減少打包體積。
- 簡單配置：只需少量命令行參數，即可完成複雜的任務。
在 Django 中，通過 Esbuild 來打包和管理靜態資源，可以更高效地整合前後端開發流程。
準備環境
初始化 Node.js 環境
在專案目錄下，執行以下指令以建立 Node.js 環境：
npm init - Y這會生成一個 package.json 文件，作為項目配置文件。
安裝 Esbuild
安裝 Esbuild 作為開發依賴：
npm install esbuild -D-D 表示將其作為開發依賴，記錄在 devDependencies 中。
構建項目結構
文件與資料夾結構
在項目根目錄下，創建以下結構：
mysite/
├── frontend/ # 原始前端代碼目錄
│ ├── scripts/
│ ├── app.js # 原始 JavaScript 文件
├── static/ # 打包後的靜態資源
│ ├── scripts/
原始 JavaScript 代碼
在 frontend/scripts/app.js 中，撰寫一個簡單的測試代碼：
console.log("Hello from Esbuild!");配置 Esbuild 打包流程
修改 package.json
在 package.json 中新增 scripts：
"scripts": {
"build": "esbuild frontend/scripts/app.js --bundle --outfile=static/scripts/app.js",
"dev": "esbuild frontend/scripts/app.js --bundle --outfile=static/scripts/app.js --watch"
}
frontend/scripts/app.js是入口文件。--bundle表示將所有依賴打包進一個文件。--outfile=static/scripts/app.js指定輸出的文件位置。--watch開啟檔案監視，檢測到變更時自動重新構建。
執行打包
執行以下指令：
npm run build打包完成後，生成的文件會位於 static/scripts/app.js。
在開發過程中，為了自動監控文件變更並重新打包，可以啟用 Watch 模式：
npm run dev這會在檔案變更時自動觸發打包，減少手動執行 npm run build 的麻煩。
整合 Django 的靜態資源
配置靜態文件目錄
在 settings.py 中，確認靜態文件的相關配置：
STATIC_URL = '/static/'
STATICFILES_DIRS = [
BASE_DIR / 'static', # 定義靜態文件目錄
]
加載靜態文件
修改 Django 頁面的模板文件（如 base.html）：
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Django App</title>
<script src="{% static 'scripts/app.js' %}" type="module"></script>
</head>
<body>
{% block content %}
<!-- 子模板的內容會插入到這裡 -->
{% endblock %}
</body>
</html>
{% load static %}：告訴模板引擎加載 Django 的靜態文件標籤。{% static 'scripts/app.js' %}：生成靜態資源的完整 URL。
解決靜態文件路徑問題
如果打包後的靜態文件無法正確被 Django 找到，可以檢查以下幾點：
- 確保
STATICFILES_DIRS包含靜態文件的路徑。 - 確認模板中是否正確使用
{% static %}。 - 靜態文件的最終路徑應類似於：
static/scripts/app.js
小結
通過使用 Esbuild 和 Django 的靜態文件機制，我們可以：
- 高效打包 JavaScript：利用 Esbuild 簡化資源管理。
- 與 Django 無縫整合：通過
{% static %}加載靜態資源，確保資源路徑正確。 - 提升開發效率：使用 Watch 模式，自動監控文件變更並重新打包。
這樣的設計既保證了前後端的分工，也為資源管理提供了現代化的解決方案。