自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

JavaScript 導(dǎo)入映射現(xiàn)在支持跨瀏覽器

作者：Echa攻城獅
開發(fā) 前端
為了成功的在模塊解析之前對其進(jìn)行解析。這個(gè) script 標(biāo)簽必須放在文檔中第一個(gè) <script type="module"> 標(biāo)簽之前(最好放在 <head>中)，另外，目前每個(gè) HTML 只允許編寫一個(gè) Import maps 。

大家好，我是Echa。

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

全文大綱

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

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

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

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

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

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

import dayjs from 'dayjs'; // webpack

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

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

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

如何使用 Import maps

我們可以通過 HTML 中的 <script type="importmap"> 標(biāo)簽來指定一個(gè) Import maps。

<script type="importmap">
{
  "imports": {
    "dayjs": "https://cdn.skypack.dev/dayjs@1.10.7",
  }
}
</script>

為了成功的在模塊解析之前對其進(jìn)行解析。這個(gè) script 標(biāo)簽必須放在文檔中第一個(gè) <script type="module"> 標(biāo)簽之前(最好放在 <head>中)，另外，目前每個(gè) HTML 只允許編寫一個(gè) Import maps 。

<script type="module">
  import dayjs from 'dayjs';

  console.log(dayjs("2023-04-01").format("YYYY-MM-DD"));
</script>

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

<script type="importmap">
{
  "imports": {
    "react": "https://cdn.jsdelivr.net/npm/react/umd/react.production.min.js",
    "react-dom": "https://cdn.jsdelivr.net/npm/react-dom/umd/react-dom.production.min.js"
   "square": "./modules/square.js",
    "lodash": "/node_modules/lodash-es/lodash.js"
  }
}
</script>

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

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

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

<script type="module">
  import { cloneDeep } from 'lodash';

  const objects = [{ a: 1 }, { b: 2 }];

  const deep = cloneDeep(objects);
  console.log(deep[0] === objects[0]);
</script>

外部映射

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

<script type="importmap" src="importmap.json"></script>

不過盡量不要使用這種方式，因?yàn)樗男阅鼙戎苯觾?nèi)聯(lián)編寫要差。

映射整個(gè)包

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

<script type="importmap">
{
  "imports": {
    "lodash/": "/node_modules/lodash-es/"
  }
}
</script>

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

<script type="module">
  import toUpper from 'lodash/toUpper.js';
  import toLower from 'lodash/toLower.js';

  console.log(toUpper('ConardLi'));
  console.log(toLower('ConardLi'));
</script>

動(dòng)態(tài)映射

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

<script>
  const importMap = {
    imports: {
      lazyload: 'IntersectionObserver' in window
        ? './lazyload.js'
        : './lazyload-fallback.js',
    },
  };

  const im = document.createElement('script');
  im.type = 'importmap';
  im.textContent = JSON.stringify(importMap);
  document.currentScript.after(im);
</script>

使用同一模塊的不同版本

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

<script type="importmap">
      {
        "imports": {
          "lodash@3/": "https://unpkg.com/lodash-es@3.10.1/",
          "lodash@4/": "https://unpkg.com/lodash-es@4.17.21/"
        }
      }
    </script>

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

<script type="importmap">
  {
    "imports": {
      "lodash/": "https://unpkg.com/lodash-es@4.17.21/"
    },
    "scopes": {
      "/static/js": {
        "lodash/": "https://unpkg.com/lodash-es@3.10.1/"
      }
    }
  }
</script>

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

兼容性

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

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

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

這個(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開發(fā)方法的優(yōu)勢。

使用ES模塊的一種現(xiàn)代方式是使用<script type=“importmap”>標(biāo)記。此標(biāo)記允許您定義外部模塊名稱到其相應(yīng)URL的映射，這使得在代碼中包含和使用外部模塊變得更容易。

要使用<script type=“importmap”>方法，首先需要將其添加到HTML文檔的<head>部分。在標(biāo)記中，您可以定義一個(gè)JSON對象，該對象將模塊名稱映射到相應(yīng)的URL。例如：

<script type="importmap">
  {
    "imports": {
      "browser-fs-access": "https://unpkg.com/browser-fs-access@0.33.0/dist/index.modern.js"
    }
  }
</script>

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

<button>Select a text file</button>
<script type="module">
  import {fileOpen} from 'browser-fs-access';

  const button = document.querySelector('button');
  button.addEventListener('click', async () => {
    const file = await fileOpen({
      mimeTypes: ['text/plain'],
    });
    console.log(await file.text());
  });
</script>

與較舊的非模塊化JavaScript開發(fā)方法相比，使用<script type=“importmap”>標(biāo)記和import關(guān)鍵字提供了一些好處。它允許您清晰明確地指定代碼所依賴的外部模塊，這使得代碼更容易理解和維護(hù)?？偟膩碚f，使用帶有＜script type＝“importmap”＞標(biāo)簽的ES模塊是在web應(yīng)用程序中包含和重用JavaScript代碼的一種現(xiàn)代而強(qiáng)大的方式。您可以按如下方式提供功能檢測支持：

if (HTMLScriptElement.supports('importmap')) {
  // The importmap feature is supported.
}

最后

一臺(tái)電腦,一個(gè)鍵盤,盡情揮灑智慧的人生;幾行數(shù)字,幾個(gè)字母,認(rèn)真編寫生活的美好;

一 個(gè)靈感,一段程序,推動(dòng)科技進(jìn)步,促進(jìn)社會(huì)發(fā)展。?

責(zé)任編輯：武曉燕 來源： 今日頭條
JavaScript瀏覽器映射
相關(guān)推薦

2009-03-23 08:50:53

瀏覽器Expression

2017-01-05 09:07:25

JavaScript瀏覽器驅(qū)動(dòng)

2010-08-17 14:22:47

JavaScript兼容性

2015-01-21 15:45:50

斯巴達(dá)瀏覽器

2016-10-09 08:38:01

JavaScript瀏覽器事件

2010-05-31 10:11:02

2010-09-15 09:12:03

JavaScript瀏覽器兼容

2022-04-07 09:00:00

跨瀏覽器測試自動(dòng)化服務(wù)異常

2022-04-29 09:11:14

CORS瀏覽器

2010-09-14 14:18:09

CSS跨瀏覽器開發(fā)

2021-08-06 10:10:47

Safari開發(fā)者瀏覽器

2009-02-19 09:42:01

SliverlightChrome微軟

2012-04-23 13:43:02

HTML5瀏覽器

2020-03-12 11:29:51

JavaScript瀏覽器語言

2016-10-26 23:00:15

javascripttesttdd

2012-03-19 17:25:22

2012-03-20 11:41:18

海豚瀏覽器

2012-03-20 11:31:58

移動(dòng)瀏覽器

2012-03-20 11:07:08

2012-01-04 16:14:17

點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號