建站
咨詢
售后
建站咨詢
新聞中心
大家好，我是Echa。
好消息， 2023年4月1號(hào) 愚人節(jié)這天 JavaScript import maps （導(dǎo)入映射）現(xiàn)在支持跨瀏覽器了，下面小編詳細(xì)介紹：
全文大綱
- 如何不基于構(gòu)建工具優(yōu)雅的實(shí)現(xiàn)模塊導(dǎo)入？
- JavaScript import maps 現(xiàn)在支持跨瀏覽器
如何不基于構(gòu)建工具優(yōu)雅的實(shí)現(xiàn)模塊導(dǎo)入？
當(dāng) ES Module 最開(kāi)始作為一種新的 JavaScript 模塊化方案在 ES6 中被引入的候，其實(shí)是通過(guò)在 import 語(yǔ)句中強(qiáng)制指定相對(duì)路徑或絕對(duì)路徑來(lái)實(shí)現(xiàn)的。
import dayjs from "https://cdn.skypack.dev/[email protected]"; // ES modules
console.log(dayjs("2023-04-1").format("YYYY-MM-DD"));
這和其他常見(jiàn)的模塊化系統(tǒng)（例如 CommonJS）的工作方式略有不同，并且在使用像 webpack 這樣的模塊打包工具的時(shí)候會(huì)使用更簡(jiǎn)單的語(yǔ)法：
const dayjs = require('dayjs') // CommonJS
import dayjs from 'dayjs'; // webpack
在這些系統(tǒng)里，模塊導(dǎo)入語(yǔ)句通過(guò) Node.js 運(yùn)行時(shí)或相關(guān)構(gòu)建工具映射到特定（版本）的文件。用戶只需要在 import 語(yǔ)句中直接編寫(xiě)模塊說(shuō)明符（通常是包名），模塊就可以自動(dòng)處理。
由于開(kāi)發(fā)人員已經(jīng)熟悉了這種從 npm 導(dǎo)入包的方式，因此必須要先經(jīng)過(guò)一個(gè)的構(gòu)建步驟才能確保以這種方式編寫(xiě)的代碼可以在瀏覽器中運(yùn)行。
Import maps 就可以解決這個(gè)問(wèn)題，它可以將模塊說(shuō)明符（包名）自動(dòng)映射到它的相對(duì)或絕對(duì)路徑。從而讓我們不使用構(gòu)建工具也能使用簡(jiǎn)潔的模塊導(dǎo)入語(yǔ)法。
如何使用 Import maps
我們可以通過(guò) HTML 中的
為了成功的在模塊解析之前對(duì)其進(jìn)行解析。這個(gè) script 標(biāo)簽必須放在文檔中第一個(gè)
在 script 標(biāo)簽內(nèi)，我們可以通過(guò)一個(gè) JSON 對(duì)象來(lái)為文檔中的腳本所需導(dǎo)入的模塊指定所有必要的映射。一個(gè)典型的 importmap 結(jié)構(gòu)如下所示：
在上面的 import 對(duì)象中，每個(gè)屬性對(duì)應(yīng)一個(gè)映射。映射的左側(cè)是導(dǎo)入說(shuō)明符的名稱(chēng)（一般是包名），而右側(cè)是說(shuō)明符需要映射到的相對(duì)或絕對(duì)路徑。在映射中指定相對(duì)路徑時(shí)，必須要確保它們始終以 /、../或 ./ 開(kāi)頭。
另外，importmap 中聲明的包并不一定意味著它一定會(huì)被瀏覽器加載。頁(yè)面上的腳本沒(méi)有使用到的任何模塊都不會(huì)被瀏覽器加載，即便你在 importmap 中聲明了它。
編寫(xiě)好 importmap 之后，你就可以在后面的腳本中直接使用 ES Module 語(yǔ)法了。
外部映射
你還可以在外部文件中指定你的映射，然后使用 script 的 src 屬性鏈接到這個(gè)文件（Content-Type Header 必須要設(shè)置為 application/importmap+json 才能正常加載）。
不過(guò)盡量不要使用這種方式，因?yàn)樗男阅鼙戎苯觾?nèi)聯(lián)編寫(xiě)要差。
映射整個(gè)包
除了將一個(gè)說(shuō)明符映射到模塊之外，你還可以將一個(gè)說(shuō)明符映射到包含多個(gè)模塊的包：
這種編寫(xiě)方式可以讓你直接導(dǎo)入指定路徑中的任何模塊，相應(yīng)的，瀏覽器也會(huì)把所有組件模塊下載下來(lái)。
動(dòng)態(tài)映射
你也可以基于一些條件在 script 中添加一個(gè)動(dòng)態(tài)映射，比如，在下面的示例中我們通過(guò)判斷是否存在 IntersectionObserver API 來(lái)導(dǎo)入不同文件：
使用同一模塊的不同版本
使用 importmap 我們可以將不同的版本的模塊映射到不同的包名中：
另外你還可以通過(guò) scopes 來(lái)實(shí)現(xiàn)同一個(gè)包不同模塊的更細(xì)粒度的版本控制：
/static/js 下的模塊會(huì)使用 3.10.1 版本，而其他模塊會(huì)使用 4.17.21 版本。
兼容性
這項(xiàng)技術(shù)目前在 Chrome 和 Edge 瀏覽器 89 及更高版本提供了全面支持，但 Firefox、Safari 和一些移動(dòng)瀏覽器還沒(méi)有支持。我們可以通過(guò)下面的代碼來(lái)判斷瀏覽器的支持情況：
if (HTMLScriptElement.supports && HTMLScriptElement.supports('importmap')) {
// import maps is supported
}對(duì)于沒(méi)有提供支持的瀏覽器，我們可以使用下面
這個(gè) polyfill：https://github.com/guybedford/es-module-shims
另外官方也推薦了一些其他 importmap 相關(guān)的 polyfill 和工具：
JavaScript import maps 現(xiàn)在支持跨瀏覽器
隨著 Safari 16.4 的發(fā)布，WebKit 引擎也支持了 Import Mpas。
ES模塊是在web應(yīng)用程序中包含和重用JavaScript代碼的一種現(xiàn)代方式。它們受到現(xiàn)代瀏覽器的支持，并提供了一些優(yōu)于舊的非模塊化JavaScript開(kāi)發(fā)方法的優(yōu)勢(shì)。
使用ES模塊的一種現(xiàn)代方式是使用
此代碼定義了一個(gè)名為“browser fs access”的外部模塊，并將其映射到unpkg CDN上托管的瀏覽器fs訪問(wèn)庫(kù)的URL。有了這個(gè)映射，現(xiàn)在可以使用import關(guān)鍵字在代碼中包含瀏覽器fs訪問(wèn)庫(kù)。請(qǐng)注意，import關(guān)鍵字僅在具有type=“module”屬性的腳本標(biāo)記中可用。
與較舊的非模塊化JavaScript開(kāi)發(fā)方法相比，使用