「前端工程化」系列正在更新: 29/36
1. Native Import: Import from URL通过 script[type=module],可直接在浏览器中使用原生 ESM。这也使得前端不打包 (Bundless) 成为可能。
代码语言:javascript复制
import lodash from 'https://cdn.skypack.dev/lodash'
由于前端跑在浏览器中,「因此它也只能从 URL 中引入 Package」
绝对路径: https://cdn.sykpack.dev/lodash相对路径: ./lib.js现在打开浏览器控制台,把以下代码粘贴在控制台中。由于 http import 的引入,你发现你调试 lodash 此列工具库更加方便了。
代码语言:javascript复制> lodash = await import('https://cdn.skypack.dev/lodash')
> lodash.get({ a: 3 }, 'a')
2. ImportMap但 Http Import 每次都需要输入完全的 URL,相对以前的裸导入 (bare import specifiers),很不太方便,如下例:
代码语言:javascript复制import lodash from 'lodash'
它不同于 Node.JS 可以依赖系统文件系统,层层寻找 node_modules
代码语言:javascript复制/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 使得裸导入可正常工作:
代码语言:javascript复制
{
"imports": {
"lodash": "https://cdn.sykpack.dev/lodash",
"ms": "https://cdn.sykpack.dev/ms"
}
}
此时可与以前同样的方式进行模块导入
代码语言:javascript复制import lodash from 'lodash'
import("lodash").then(_ => ...)
你关于这道题的答案是什么,欢迎留言! 每天晚上九点在 B 站直播讲解工程化系列文章,欢迎在 B 站关注程序员山月。