實驗：導入地圖

隨著 ES 模組在整個 Javascript 生態系統中越來越受歡迎，很自然地會想直接在瀏覽器中使用它們。我們可以通過 script 的 type="module" 屬性來實現，但瀏覽器需要能夠將導入名稱解析為可以載入和執行的 Javascript 檔案。importmap script 類型是解決這個問題的方法。

對於 DataTables，我們可以建立一個非常簡單的導入地圖，如下所示（請注意，DataTables 依賴於 jQuery，因此我們也需要為它新增一個解析器，即使我們在這裡實際上沒有寫任何 jQuery 程式碼）

<script type="importmap">
{
    "imports": {
        "jquery": "https://esm.sh/jquery@3.6.3",
        "datatables.net": "https://cdn.datatables.net/1.13.3/js/jquery.dataTables.min.mjs"
    }
}
</script>

現在瀏覽器有了這個對應關係，我們可以像往常一樣 import 並使用 DataTables

<script type="module">
import DataTable from 'datatables.net';

window.addEventListener('DOMContentLoaded',function () {
    new DataTable('#example');
});
</script>

您可以在這裡看到該腳本及其載入方式。

這篇文章的目標是探討如何透過 DataTables 的導入地圖輕鬆使用 DataTables，並評估這種方法的優點和限制。

導入地圖的吸引力

導入地圖是一種在瀏覽器中啟用 ES 模組的方法，允許它們透過簡單的名稱查詢來存取外部內容。就是這樣！

ES 模組的 import 語法非常簡潔。需要一個模組；只需 import 它即可。我們可以獲得重複使用、最佳化載入和簡單易用的語法等好處。捆綁器可以使用 ES 模組來實現 tree shaking，因此不會向客戶端提供未使用的程式碼。將其與構成 DataTables 軟體套件的大量檔案（取決於您想使用的功能和樣式）結合起來，ES 模組使開發工作變得更加容易。

要選擇要導入的 DataTables 模組，我們有我們的下載產生器來協助。頁面底部顯示的 npm 指令與 import 語句與此載入器的導入語句相符。在撰寫本文時，有 136 個可以載入 DataTables 的檔案（通常您只需要其中幾個 - 您絕對不會載入全部，因為它們會衝突！）。結果是，您不想手動為 DataTables 建立導入地圖。您只想導入一個涵蓋所有內容的單一地圖，然後在您的 Javascript 模組中導入您想要的函式庫。

外部地圖

在撰寫本文時（2023 年 3 月），沒有瀏覽器支援外部導入地圖（例如，遠端載入 JSON），儘管 Web Incubator Community Group 中對此進行了討論。因此，為了能夠使用外部的導入地圖，我們需要使用 Javascript 來為我們建立地圖 - 即載入一個將建立地圖並允許我們使用它的 Javascript 檔案。

DataTables 的此類檔案在此處可用

要使用它，請將它作為 script 包含在您的頁面上，您將立即能夠使用 DataTabes 的 import 語句 - 例如

<script src="https://cdn.datatables.net/1.13.3/js/importmap.js"></script>
<script type="module">
    import DataTable from 'datatables.net';

    window.addEventListener('DOMContentLoaded',function () {
    new DataTable('#example');
    });
</script>

限制

導入地圖在目前所有永久更新的瀏覽器版本中都支援，並且舊版瀏覽器也存在 polyfill，因此可用性不是太大的問題（除非您仍然需要支援舊版瀏覽器，例如 IE）。但是，目前存在許多實質性問題限制了導入地圖的實用性。

無外部 JSON

我們在上面看到目前不支援外部 JSON，因此需要使用變通方法從 Javascript 檔案建立導入地圖。

每個文件單一導入地圖

導入地圖規範不允許每個 document 有多個導入地圖。僅會解析第一個，其餘的則忽略。結果是，您無法包含 DataTables 的導入地圖，以及 Bootstrap 或任何其他函式庫提供的另一個導入地圖 - 您必須手動將它們組合在一起。

無子資源完整性

導入地圖規範目前不支援子資源完整性（SRI）。地圖無法說明為 datatables.net（或任何其他模組）解析的檔案必須具有特定的雜湊值，否則應視為無效。這是網頁開發的重要部分，尤其是在包含來自外部 CDN 的資源時。

CSS

沒有與 CSS 對應的功能。我們經常看到這種情況，Javascript 開發工具可能會超越 CSS（捆綁器是一個常見的例子，其中 CSS 在事後新增）。DataTables 和其他 Javascript 函式庫強烈依賴其 CSS 來向最終使用者顯示美觀的前端。如果我們仍然需要許多用於 CSS 的 link 元素，那麼擁有單一導入地圖，然後在 Javascript 中使用 import 語句有什麼意義？

結論

我真的希望導入地圖規範能夠繼續發展，並且瀏覽器能夠完全實現它。它可以成為開發網頁元件的好工具，但目前其效用有限，我（還）沒有承諾在每個版本的 DataTables 中提供導入地圖。