Day2 - 如何安裝 HTMX

Genos
2023-09-17 18:11:12

HTMX 使用方式很簡單，像 jQuery 一樣使用 標籤引入來源就好，以下是官方文件（https://htmx.org/docs/#introduction） 中提供的幾種使用方式

CDN

本文撰寫時最新版本是 1.9.5 版，可以到 unpkg (https://unpkg.com/browse/htmx.org@1.9.5/dist/) 查看有沒有新的版本



本地資源

官方文件中有提醒使用 CDN 的一些風險，如果是正式的產品的話，還是下載到自己的伺服器上比較保險



NPM

使用 NPM 安裝 HTMX 時需要注意 htmx 這個名稱已經被用掉了，使用htmx.org才能正確安裝套件

npm install htmx.org

Webpack

基本的用法就是在進入點（通常是 index.js）的 JS 檔中引入 HTMX

import 'htmx.org';

另外官方也推薦可以把 HTMX 註冊到 window 中，做為全域變數使用

1. 在專案中新增一個 xxx.js （檔名自行調整）

2. 引入自己建立的 xxx.js

import 'htmx.org';
// 請在 HTMX 之後引入自己的檔案
import 'path/to/xxx.js';

3. 在 xxx.js 中加入以下程式碼

window.htmx = require('htmx.org');

4. 完成