阿川私房教材：
學 JavaScript 前端，帶作品集去面試！

63 個專案實戰，寫出作品集，讓面試官眼前一亮！

立即開始免費試讀！

小編精選 - 技術文章翻譯 · 06月20日

從 0 到 500 個 GitHub Star：我們一年來的冒險🔥

大家好！今天，我們想分享前幾天發生的一件大事。我們在 GitHub 上的專案獲得了 500 個星！

這真的很酷，因為不僅我為這個專案付出了很多努力，而且還有數十位其他貢獻者和數千名喜歡、評論並長期關注我們旅程的人也付出了很多努力。

從刪除程式碼庫到為 WebPack 和 Vite 開發新插件，我們經歷了很多。在本文中，我將嘗試簡要介紹我們的歷程，以及我們是如何獲得如此多的 Stars 的。

好了，別耽擱了。開始吧！ 🚙

📚 HMPL.js的歷史

一切始於將 Cample.js 框架的舊開發成果與模板語言結合的想法。最初的幾步進展不順利，距離如今的模式語言還很遙遠。

我們之前有好幾個程式碼庫，這是我們去年 11 月開始的第二個。那段時間，我們大部分時間都在開發專案，完成一些工作。但直到 2 月份，我們才開始在社群網路上活躍起來🌐。

我們已經寫了幾篇關於這段時間成長情況的文章：

如今，回顧當時和現在的寫作，頗有趣味。在那裡，我詳細地講述了歷史，但在這裡，重複這些卻毫無意義。

👀 這是什麼專案？

如果有人不知道的話，HMPL 是一種小型模板語言，用於從伺服器向客戶端顯示 UI。它基於透過 fetch 發送到伺服器的可自訂請求，並處理成現成的 HTML。這是什麼意思呢？最好用程式碼來展示：

import { compile } from "hmpl-js";

const templateFn = compile(
  `<div>
    <button class="getHTML">Get HTML!</button>
    {{#request
      src="/api/test"
      after="click:.getHTML"
      repeat=false
    }}
      {{#indicator trigger="pending"}}
        <p>Loading...</p>
      {{/indicator}}
    {{/request}}
  </div>`
);

const wrapper = document.getElementById("wrapper");

const elementObj = templateFn();

wrapper.appendChild(elementObj.response);

本質上，這是一個 HTML 插件，用於實作伺服器端應用程式。也就是說，它不是在伺服器上渲染，而是將伺服器上的元件掛載到客戶端。