大家好，我是Echa。

好消息， 2023年4月1號 愚人節(jié)這天 JavaScript import maps （導入映射）現(xiàn)在支持跨瀏覽器了，下面小編詳細介紹：

全文大綱

1. 如何不基于構(gòu)建工具優(yōu)雅的實現(xiàn)模塊導入？
2. JavaScript import maps 現(xiàn)在支持跨瀏覽器

如何不基于構(gòu)建工具優(yōu)雅的實現(xiàn)模塊導入？

當 ES Module 最開始作為一種新的 JavaScript 模塊化方案在 ES6 中被引入的候，其實是通過在 import 語句中強制指定相對路徑或絕對路徑來實現(xiàn)的。

import dayjs from "https://cdn.skypack.dev/[email protected]"; // ES modules
console.log(dayjs("2023-04-1").format("YYYY-MM-DD"));

這和其他常見的模塊化系統(tǒng)（例如 CommonJS）的工作方式略有不同，并且在使用像 webpack 這樣的模塊打包工具的時候會使用更簡單的語法：

const dayjs = require('dayjs') // CommonJS

import dayjs from 'dayjs'; // webpack

在這些系統(tǒng)里，模塊導入語句通過 Node.js 運行時或相關構(gòu)建工具映射到特定（版本）的文件。用戶只需要在 import 語句中直接編寫模塊說明符（通常是包名），模塊就可以自動處理。

由于開發(fā)人員已經(jīng)熟悉了這種從 npm 導入包的方式，因此必須要先經(jīng)過一個的構(gòu)建步驟才能確保以這種方式編寫的代碼可以在瀏覽器中運行。

Import maps 就可以解決這個問題，它可以將模塊說明符（包名）自動映射到它的相對或絕對路徑。從而讓我們不使用構(gòu)建工具也能使用簡潔的模塊導入語法。

如何使用 Import maps

我們可以通過 HTML 中的 

為了成功的在模塊解析之前對其進行解析。這個 script 標簽必須放在文檔中第一個 

在 script 標簽內(nèi)，我們可以通過一個 JSON 對象來為文檔中的腳本所需導入的模塊指定所有必要的映射。一個典型的 importmap 結(jié)構(gòu)如下所示：

在上面的 import 對象中，每個屬性對應一個映射。映射的左側(cè)是導入說明符的名稱（一般是包名），而右側(cè)是說明符需要映射到的相對或絕對路徑。在映射中指定相對路徑時，必須要確保它們始終以 /、../或 ./ 開頭。

另外，importmap 中聲明的包并不一定意味著它一定會被瀏覽器加載。頁面上的腳本沒有使用到的任何模塊都不會被瀏覽器加載，即便你在 importmap 中聲明了它。

編寫好 importmap 之后，你就可以在后面的腳本中直接使用 ES Module 語法了。

外部映射

你還可以在外部文件中指定你的映射，然后使用 script 的 src 屬性鏈接到這個文件（Content-Type Header 必須要設置為 application/importmap+json 才能正常加載）。

不過盡量不要使用這種方式，因為它的性能比直接內(nèi)聯(lián)編寫要差。

映射整個包

除了將一個說明符映射到模塊之外，你還可以將一個說明符映射到包含多個模塊的包：

這種編寫方式可以讓你直接導入指定路徑中的任何模塊，相應的，瀏覽器也會把所有組件模塊下載下來。

動態(tài)映射

你也可以基于一些條件在 script 中添加一個動態(tài)映射，比如，在下面的示例中我們通過判斷是否存在 IntersectionObserver API 來導入不同文件：

使用同一模塊的不同版本

使用 importmap 我們可以將不同的版本的模塊映射到不同的包名中：

另外你還可以通過 scopes 來實現(xiàn)同一個包不同模塊的更細粒度的版本控制：

/static/js 下的模塊會使用 3.10.1 版本，而其他模塊會使用 4.17.21 版本。

兼容性

這項技術目前在 Chrome 和 Edge 瀏覽器 89 及更高版本提供了全面支持，但 Firefox、Safari 和一些移動瀏覽器還沒有支持。我們可以通過下面的代碼來判斷瀏覽器的支持情況：

if (HTMLScriptElement.supports && HTMLScriptElement.supports('importmap')) {
  // import maps is supported
}

對于沒有提供支持的瀏覽器，我們可以使用下面

這個 polyfill：https://github.com/guybedford/es-module-shims

另外官方也推薦了一些其他 importmap 相關的 polyfill 和工具：

JavaScript import maps 現(xiàn)在支持跨瀏覽器

隨著 Safari 16.4 的發(fā)布，WebKit 引擎也支持了 Import Mpas。

ES模塊是在web應用程序中包含和重用JavaScript代碼的一種現(xiàn)代方式。它們受到現(xiàn)代瀏覽器的支持，并提供了一些優(yōu)于舊的非模塊化JavaScript開發(fā)方法的優(yōu)勢。

使用ES模塊的一種現(xiàn)代方式是使用

此代碼定義了一個名為“browser fs access”的外部模塊，并將其映射到unpkg CDN上托管的瀏覽器fs訪問庫的URL。有了這個映射，現(xiàn)在可以使用import關鍵字在代碼中包含瀏覽器fs訪問庫。請注意，import關鍵字僅在具有type=“module”屬性的腳本標記中可用。

Select a text file

與較舊的非模塊化JavaScript開發(fā)方法相比，使用