首先要使用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模塊。

當前的ES模塊格局

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 type="module" src="/ucamc/app.js"></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模塊加載

參考連結:

網站如何開始使用 ES6 / ES2015 模組化技術進行前端開發

Using ES Modules in the Browser Today

您也可能喜歡這些文章