簡單的案例

我們用模塊來改變<p>元素的文字顏色。

index.html

<script type="module">
  // 導入 firstBlood 模塊
  import { pColor } from './firstBlood.mjs';
  // 設置顏色為藍色
  pColor('blue');
</script>

firstBlood.mjs

// export 一個改變<p>元素顏色的方法
export function pColor (color) {
  const p = document.querySelector('p');
  p.style.color = color;
}

可以看到<p>文字變成藍色了：

提示:

• 對于需要引入模塊的?<script>?元素，我們需要添加?type="module"?，
• 這個時候，瀏覽器會把這段內聯(lián) script 或者外鏈 script 認為是 ?ECMAScript ?模塊。
  
• 模塊 JS 文件，業(yè)界或者官方約定俗成命名為?.mjs?文件格式，
• 一來可以和普通 JavaScript 文件（.js后綴）進行區(qū)分，一看就知道是模塊文件；
• 二來 Node.js 中 ES6 的模塊化特性只支持?.mjs?后綴的腳本，可以和 Node.js 保持一致。
• 當然，我們直接使用.js作為模塊 JS 文件的后綴也是可以的。
• 在瀏覽器側進行 import 模塊引入，其對模塊 JS 文件的 mime type 要求非常嚴格，務必和 JS 文件一致。
• 這就導致，如果我們使用?.mjs?文件格式，則需要在服務器配置 ?mime type? 類型，否則會報錯：

擴展閱讀:

Nginx 對于不識別后綴默認會給一個application/octet-stream的 MIME type，方便下載等處理，

但是，在模塊化引入這里，這個 MIME type 無效。

無論是 Apache 服務器還是 Nginx，都可以修改 mime.types 文件使.mjs的 MIME type 和.js文件一樣。