使用 Import Map 無需打包器的 NPM 模組導入方法

更新日期： 2024 年 11 月 8 日

隨著 JavaScript 模組化需求的增長，許多專案依賴 NPM（Node Package Manager）來管理第三方套件。

然而，傳統的 NPM 模組使用流程，往往需要透過打包工具（如 Webpack 或 Vite）將模組整合到項目中。

本文介紹了一種簡單的作法，可以使用 Import Map 無需打包器，直接在 HTML 中引入 NPM 模組。

Import Map 基本用法

Import Map 是一種能讓開發者在 HTML 中直接指定 JavaScript 模組映射的功能。

它允許使用者定義模組路徑，不僅可以指定本地檔案，還可以指定網路上的遠端模組。以下為基本範例：

<script type="importmap">
  {
    "imports": {
      "square": "./module/shapes/square.js",
      "circle": "https://example.com/shapes/circle.js"
    }
  }
</script>

關鍵字與對應路徑

• square：對應到本地檔案路徑，位於項目中的 module/shapes/square.js
• circle：對應到遠端 URL，從指定的網路位置載入 circle.js

此範例中的 Import Map 標籤定義了一組模組映射，開發者可以直接在 JavaScript 程式碼中引用 square 和 circle，如同引入本地模組一般。

使用 JSPM 加載第三方套件

要使用遠端資源時，開發者可以透過 JSPM 提供的 CDN 服務來引用 NPM 套件。

以下為導入 axios 套件的範例，將 axios 的模組來源映射到 JSPM CDN 提供的 URL：

<script type="importmap">
  {
    "imports": {
      "axios": "https://ga.jspm.io/npm:axios@1.7.7/index.js"
    },
    "scopes": {
      "https://ga.jspm.io/": {
        "#lib/adapters/http.js": "https://ga.jspm.io/npm:axios@1.7.7/lib/helpers/null.js",
        "#lib/platform/node/classes/FormData.js": "https://ga.jspm.io/npm:axios@1.7.7/lib/helpers/null.js",
        "#lib/platform/node/index.js": "https://ga.jspm.io/npm:axios@1.7.7/lib/platform/browser/index.js"
      }
    }
  }
</script>

在這段 Import Map 中：

• imports 定義了主模組 axios 的位置。
• scopes 則用來解決不同平台上的相依問題，例如將 axios 在 Node 環境中的部分模組映射至瀏覽器兼容的空模組。

透過此設置，開發者可以直接使用 axios 套件，無需進行任何打包操作。

如何在主程式中引用 Import Map

在 HTML 中導入 importmap 後，可以透過 <script> 標籤引用主程式檔案，記得指定 type="module" 屬性，以確保瀏覽器能識別 ES 模組格式：

<script src="main.js" type="module"></script>

這樣一來，主程式 main.js 可以直接使用 Import Map 定義的模組，不再需要額外的打包流程。

使用 Import Map 的潛在缺點

使用 Import Map 雖然方便，但也有一些潛在缺點。

由於 Import Map 依賴 CDN 載入資源，當 CDN 遭遇服務中斷時，模組資源可能無法順利加載。

然而，現代 CDN 網絡已經極大地降低了此風險，主要透過全球多個節點來確保高可靠性。

當某地區的節點發生故障時，CDN 會自動切換到其他地區的節點。

例如，台灣使用者可能會連接香港節點，而當香港節點故障時，則自動切換到日本或韓國的節點。

CDN 的內容傳遞網路概念

CDN（內容傳遞網路）透過分布在各地的伺服器加快資源傳輸速度，它不僅提高了效能，也增強了穩定性。

CDN 的核心原理，即是將內容傳遞至最接近使用者的節點，減少資源加載時間。

因此，即使某一節點失效，CDN 也能確保資料的穩定傳遞。

結論

使用 Import Map 和 JSPM 的方式來引入 NPM 模組，是一種高效的替代方案。

不僅避免了打包工具的繁瑣配置，還簡化了模組管理流程。

透過 CDNs 提供的全球性資源分發網絡，開發者能更可靠地使用外部資源。

因此，這種方法特別適合小型專案或不依賴複雜打包環境的情境，有助於減少項目複雜性並提升開發效率。