在瀏覽器中使用ESModules，超級簡單

原文：Super Simple Start to ESModules in the Browser by Kent C. Dodds.

我在js還沒有modules的時代就開始寫js了，當EcmaScript規範宣佈要支援modules的時候我很激動。但是我知道標準與落地之間還有很長很長的路要走，我就又有一點失望了。

現在，所有主流瀏覽器支援ES Modules已經有一陣了，下面讓我來展示一下超級簡單的ES Modules起手例子

首先，建立第一js檔案

// append-div.js
function appendDiv(message) {
  const div = document.createElement('div')
  div.textContent = message
  document.body.appendChild(div)
}

export {appendDiv}

接下來，建立一個HTML檔案引入js

<!-- index.html -->
<script type="module">
  import {appendDiv} from './append-div.js'
  appendDiv('Hello from inline script')
</script>

注意type="module"這個屬性。我們想讓瀏覽器把一段js程式碼當作module而不是script指令碼，只需要這個欄位。是module還是script指令碼，在執行時會有一寫區別，這個後面我補充，現在只要知道，我們可以用modeule就行啦！

在上面的行內script程式碼中，我們從append-div.js中引入了appenDiv方法。不幸的是，為了引入module，我們不能直接在瀏覽器開啟html本地訪問，必須啟動一個本地服務來跑。如果你裝了nodejs，直接在終端中找到檔案所在目錄，執行下面這個命令來啟動一個服務

npx serve

終端中會列印出一執行資訊，然後你就可以在瀏覽器開啟地址了。隨即螢幕上會展示"Hello from inline script"，大功告成，我們真正的載入了一個EcmaScript Module?

通常情況我們不會在html寫行內js，所以，讓我們載入一個moduel

<!-- index.html -->
<script type="module">
  import {appendDiv} from './append-div.js'
  appendDiv('Hello from inline script')
</script>
<script type="module" src="./script-src.js"></script>

改動之後，螢幕上還是展示"Hello from external script"

有一點要強調，import語句後面的.js必須加。有人可能被nodejs和babel寵壞了，不習慣寫字尾。在modeuls規範中，字尾是必須帶上的。

我來展示一下動態載入，新增一個js檔案

// async-script.js
import {appendDiv} from './append-div.js'

function go() {
  appendDiv('Hello from async script')
}

export {go}

接下來我們可以用動態import語法

// script-src.js
import {appendDiv} from './append-div.js'

appendDiv('Hello from external script')

import('./async-script.js').then(
  moduleExports => {
    moduleExports.go()
  },
  error => {
    console.error('there was an error loading the script')
    throw error
  },
)

動態引入同樣也需要補全地址(待字尾)，
宣告一下，重點不是帶不帶字尾，而是指定瀏覽器以什麼方式去請求這個地址。需要返回以一個可以被當作javaScript執行的text檔案.

這意味著如果你恰好有一個url，返回javaScript檔案，但是沒有.js字尾，就可以忽略字尾。比如這個例子，可以在瀏覽器開啟看一下會返回什麼

import * as d3 from 'https://unpkg.com/d3?module'

重點是你import的地址(寫在引號裡面的)，必須是某一個服務的javaScript資源。

在瀏覽器中使用ESModules，超級簡單

相關文章