站長阿川 · 09月18日

Preact 直接從 CDN 載入，不進 build

用 htm 取代 JSX，瀏覽器直接跑，不需要編譯。

我的 package.json 裡面沒有 Preact。

"devDependencies": {
    "@tailwindcss/vite": "^4.0.0",
    "laravel-vite-plugin": "^2.0.0",
    "tailwindcss": "^4.0.0",
    "vite": "^7.0.7"
}

Vite 只負責 Tailwind 的 CSS。JavaScript 那邊一個框架都沒裝。

元件是這樣寫的，直接在 blade 檔的 <script type="module"> 裡：

import { html, render, useState } from 'https://esm.sh/[email protected]/preact/standalone';

瀏覽器原生支援 ES module import，所以這一行不需要打包、不需要編譯，存檔重整就看得到。

關鍵是 htm，不是 Preact

JSX 需要編譯，這是所有前端 build 流程的起點。一旦你要編譯 JSX，你就需要 bundler、需要設定、需要 dev server、需要處理 HMR。

htm 用的是 JavaScript 原生的 tagged template：

function QtyControl({ quantity, onChange }) {
    return html`
        <div class="flex items-center border border-dust">
            <button onClick=${() => onChange(quantity - 1)}>−</button>
            <span>${quantity}</span>
            <button onClick=${() => onChange(quantity + 1)}>＋</button>
        </div>
    `;
}

跟 JSX 幾乎一樣好寫，差別只在標籤用 ${} 插值、自訂元件寫成 <${Foo} />。

它是合法的 JavaScript，所以瀏覽器直接看得懂。 沒有編譯這一步，整條 build pipeline 就消失了。

換來什麼

部署少一個步驟。 JS 不需要 build，改 blade 就是改完了。

前端跟後端同一個檔案、同一次部署。 不會有「前端已經上了、後端還沒上」的空窗。

誠實講缺點

你依賴一個 CDN。 所以版本一定要鎖死（[email protected]，不是 @latest），而且要接受 esm.sh 掛掉的風險。真的在意的話，把那份檔案抓下來放自己的 public/，一樣不需要 build。

沒有型別檢查、沒有 lint、編輯器支援也普通。 這是真的。

所以我只用它寫小元件。 一個購物車頁、一個搜尋框、一個後台表單，四五百行以內。超過這個規模，前面那些缺點會開始咬人——但電商的互動元件，本來就不該超過這個規模。

技術選擇要配合規模。 六個小元件，不值得為它建一條 build pipeline。

站長阿川

⭐️ Shopify 網站開發服務（給品牌）
https://job.turn.tw/shopify-services

⭐️ 川川電商事務所（全客製電商開發服務）
https://chuanchuan.tw

⭐️ 台灣 Shopify 商家交流 LINE 群（非官方）
https://line.me/ti/g2/PZ_1LILWVWWuzZQ50HNpYA-A3k6QXWF6znqoBQ

⭐️ 台灣 Shopify 開發者 LINE 群（非官方）
https://line.me/ti/g2/YUasX5K3CJ4QdIx76zppjHlh3-q8w-xkSyK1LA

0個讚 0留言 4瀏覽

共有 0 則留言

登入之後發表留言

文字內容提供幾種功能：
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式

站長阿川

🏆 本月排行榜

🥇

站長阿川

📝45 💬1

643

評分標準：發文×10 + 留言×3 + 獲讚×5 + 點讚×1 + 瀏覽數÷10

本數據每小時更新一次