瀏覽器中加載模塊type=”module”使用import、export

9 月 23, 2019 | 文 | 0 comments

首先要使用Javascript modules需要一台伺服器，以便能夠通過導入進行獲取，因為它不適用於該協議。您可以用來啟動當前的伺服器，若沒有以下提供lite-server ，這個使用node npm安裝的輕量伺服器可使用。

透過 lite-server 這個輕量的開發伺服器，就可以快速啟動網站進行測試：

透過 npm 全域安裝 lite-server

npm install -g lite-server

在要執行的專案資料夾目錄下，執行以下命令，啟動本地開發伺服器

lite-server

此時瀏覽器會自動開啟 http://localhost:3000/ 網頁

這樣有了伺服器你可以開始使用ESM模組化技術。

如何在當今的瀏覽器中使用ES模塊

直到最近，JavaScript還沒有模塊的概念。無法直接引用一個JavaScript文件或將其包含在另一個JavaScript文件中。隨著應用程序規模和復雜性的增長，這使得為瀏覽器編寫JavaScript變得棘手。

一種常見的解決方案是使用<script>標籤在網頁中加載任意腳本。但是，這帶來了自己的問題。例如，每個腳本都會啟動一個阻止渲染的HTTP請求，這可能會使JS繁重的頁面顯得遲鈍且緩慢。依賴管理也變得很複雜，因為加載順序很重要。

ES6（ES2015）通過引入單個本機模塊標準解決了這種情況。但是，由於瀏覽器最初對ES6模塊的支持不佳，人們開始使用模塊加載器將依賴項捆綁到單個ES5跨瀏覽器兼容的文件中。此過程介紹了自己的問題和復雜程度。

但是，好消息即將到來。瀏覽器支持變得越來越好，因此讓我們看一下如何在當今的瀏覽器中使用ES6模塊。

Safari，Chrome，Firefox和Edge均支持ES6模塊導入語法。你只要在<script>標籤中加入 type="module"屬性 (Attribute)，就可以啟用 ESM 機制。

<script type="module">
    import { tag } from './html.js'

    const h1 = tag('h1', ' Hello Modules!')
    document.body.appendChild(h1)
</script>

html.js

export function tag (tag, text) {
    const el = document.createElement(tag)
    el.textContent = text

    return el
}

或作為外部腳本：

<script src="app.js" type="module"></script>

app.js

import { tag } from './html.js'

const h1 = tag('h1', ' Hello Modules!')
document.body.appendChild(h1)

html.js

export function tag (tag, text) {
    const el = document.createElement(tag)
    el.textContent = text

    return el
}

只需將其type="module"添加到腳本標籤中，瀏覽器便會將它們作為ES模塊加載。瀏覽器將遵循所有導入路徑，僅下載和執行每個模塊一次。

ES模塊加載

參考連結: