隨著匯入地圖,匯入 ES 模組的效率大幅提升。
ES 模組是一種新型的在網頁應用程式中加入及重複使用 JavaScript 程式碼的方式。這些程式庫受到新式瀏覽器支援,與較舊的非模組化 JavaScript 開發方法相比可帶來幾項優勢。
使用 ES 模組的新方式是透過 <script type="importmap">
標記。這個標記可讓您定義外部模組名稱與其對應網址的對應關係,方便您在程式碼中納入及使用外部模組。
如要使用 <script type="importmap">
方法,請先將該方法新增至 HTML 文件的 <head>
區段。在標記中,您可以定義 JSON 物件,將模組名稱對應至對應的網址。例如:
<script type="importmap">
{
"imports": {
"browser-fs-access": "https://unpkg.com/browser-fs-access@0.33.0/dist/index.modern.js"
}
}
</script>
這段程式碼定義名為 "browser-fs-access"
的單一外部模組,並對應至 browser-fs-access 程式庫的網址 (託管於 Unpkg CDN)。對應完成之後,您現在可以使用 import
關鍵字,在程式碼中加入 Browser-fs-access 程式庫。請注意,import
關鍵字只能在含有 type="module"
屬性的 script
標記中使用。
<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 開發方法,使用 <script type="importmap">
標記和 import
關鍵字可帶來多項好處。可讓您明確且明確指定程式碼依附的外部模組,以便理解及維護程式碼。整體而言,將 ES 模組與 <script type="importmap">
標記搭配使用,是結合及重複使用 JavaScript 程式碼的先進方式。您可以採用以下方式偵測功能偵測:
if (HTMLScriptElement.supports('importmap')) {
// The importmap feature is supported.
}
瀏覽器支援
- 89
- 89
- 108
- 16.4