高级前端
前端工程化
【Q726】浏览器中如何使用原生的 ESM

浏览器中如何使用原生的 ESM

Issue 欢迎在 Gtihub Issue 中回答此问题: Issue 752 (opens in a new tab)

Author 回答者: shfshanyue (opens in a new tab)

Native Import: Import from URL

通过 script[type=module],可直接在浏览器中使用原生 ESM。这也使得前端不打包 (Bundless) 成为可能。

<script type="module">
  import lodash from "https://cdn.skypack.dev/lodash";
</script>

由于前端跑在浏览器中,因此它也只能从 URL 中引入 Package

  1. 绝对路径: https://cdn.sykpack.dev/lodash
  2. 相对路径: ./lib.js

现在打开浏览器控制台,把以下代码粘贴在控制台中。由于 http import 的引入,你发现你调试 lodash 此列工具库更加方便了。

> lodash = await import('https://cdn.skypack.dev/lodash')
 
> lodash.get({ a: 3 }, 'a')

ImportMap

Http Import 每次都需要输入完全的 URL,相对以前的裸导入 (bare import specifiers),很不太方便,如下例:

import lodash from "lodash";

它不同于 Node.JS 可以依赖系统文件系统,层层寻找 node_modules

/home/app/packages/project-a/node_modules/lodash/index.js
/home/app/packages/node_modules/lodash/index.js
/home/app/node_modules/lodash/index.js
/home/node_modules/lodash/index.js

在 ESM 中,可通过 importmap 使得裸导入可正常工作:

<script type="importmap">
  {
    "imports": {
      "lodash": "https://cdn.skypack.dev/lodash",
      "ms": "https://cdn.skypack.dev/ms"
    }
  }
</script>

此时可与以前同样的方式进行模块导入

import lodash from 'lodash'
 
import("lodash").then(_ => ...)

那么通过裸导入如何导入子路径呢?

<script type="importmap">
  {
    "imports": {
      "lodash": "https://cdn.skypack.dev/lodash",
      "lodash/": "https://cdn.skypack.dev/lodash/"
    }
  }
</script>
<script type="module">
  import get from "lodash/get.js";
</script>

Import Assertion

通过 script[type=module],不仅可引入 Javascript 资源,甚至可以引入 JSON/CSS,示例如下

<script type="module">
  import data from "./data.json" assert { type: "json" };
 
  console.log(data);
</script>

Author 回答者: heretic-G (opens in a new tab)

补充三点

1.module默认是defer的加载和执行方式

2.这里会存在单独的module的域不会污染到全局

3.直接是strict