JavaScript modules

今天要來研究 JavaScript modules, 英文好的話, 可以看這一篇:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules

雖然有機器翻譯的簡中版本, 但看起來還是很吃力, 不如直接看英文:
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Modules

大致上來說, 就是可以把 javascript 打包成一個模組, 想要用的時候再 import 進來使用.

import 範例:

副程式, 要 export:

// my_func.js
export function my_func() {
  /* function content goes here */
}

主程式, import:

<script type="module">
import { my_func } from './my_func.js';
my_func();
</script>

使用 importmap 的範例:

<script type="importmap">
  {
    "imports": {
      "lodash": "https://unpkg.com/[email protected]/lodash.js"
    }
  }
</script>

呼叫範例:
https://web.dev/import-maps-in-all-modern-browsers/

<script type="module">
  import _ from 'lodash';

  console.log(_.map([1, 2, 3], (n) => n * 2));
</script>

測試 importmap 是否支援:

if (HTMLScriptElement.supports('importmap')) {
  // The importmap feature is supported.
}

importmap 是通過HTML document中的 <script type=”importmap”>標籤開始使用。importmap script 標籤必須放在 document 中的中第一個 <script type=”module”>標籤之前(最好是在<head>中),以便在進行模組解析之前對它進行解析。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *