簡(jiǎn)單的案例

我們用模塊來(lái)改變<p>元素的文字顏色。

index.html

<script type="module">
  // 導(dǎo)入 firstBlood 模塊
  import { pColor } from './firstBlood.mjs';
  // 設(shè)置顏色為藍(lán)色
  pColor('blue');
</script>

firstBlood.mjs

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

可以看到<p>文字變成藍(lán)色了：

提示:

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

擴(kuò)展閱讀:

Nginx 對(duì)于不識(shí)別后綴默認(rèn)會(huì)給一個(gè)application/octet-stream的 MIME type，方便下載等處理，

但是，在模塊化引入這里，這個(gè) MIME type 無(wú)效。

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