今天要來研究 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>中），以便在進行模組解析之前對它進行解析。