三分钟了解浏览器中的 ESM

山月

发布于 2021-11-26 10:54:13

2.1K0

发布于 2021-11-26 10:54:13

文章被收录于专栏：服务器运维笔记

「前端工程化」系列正在更新: 29/36

1. Native Import: Import from URL

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

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

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

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

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

> lodash = await import('https://cdn.skypack.dev/lodash')

> lodash.get({ a: 3 }, 'a')

2. 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.sykpack.dev/lodash",
    "ms": "https://cdn.sykpack.dev/ms"
  }
}
</script>

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

import lodash from 'lodash'

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

你关于这道题的答案是什么，欢迎留言！ 每天晚上九点在 B 站直播讲解工程化系列文章，欢迎在 B 站关注程序员山月。

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2021-11-24，如有侵权请联系 cloudcommunity@tencent.com 删除

php

本文分享自全栈成长之路微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度