主要观点:介绍在无构建系统的情况下导入 JavaScript 库的方法,包括三种主要类型的 JavaScript 文件(ES Modules、“classic”全局变量类型、CommonJS)及其识别和使用方式,如使用 importmaps 或 esbuild 等工具,还讨论了不同库在构建中的文件类型及相关问题,如浏览器对 importmaps 的支持等。
关键信息:
- 三种文件类型及特点:“classic”文件可直接用
<script src>,ES Module 有import等语法,CommonJS 有require等语法。 - 查找文件位置:通过 NPM 安装库可查看其构建文件,文件位置在
package.json中。 - 使用 UMD 文件:如 Chart.js 的
chart.umd.js,直接添加<script src>即可使用。 - 使用 ES Module 与 importmaps:需设置导入映射,步骤较繁琐,且可能存在下载文件过多等问题。
- 使用 ES Module 无 importmaps:若无依赖,直接在 HTML 中用
<script type="module">。 - 使用 esbuild:可转换 CommonJS 模块为 ES Module,但有局限性。
- 关于工具:如 Simon Willison 的 download-esm、esm.sh、skypack.dev、esbuild、JSPM 等。
重要细节: - 不同库在
dist目录中的文件情况不同,如 Chart.js 的各种文件。 - 在使用 importmaps 时遇到本地开发环境中下载文件过多导致问题。
- 对不同工具的信任度及优缺点的讨论,如对 CDN 的担忧等。
- 提出的一些未解答的问题,如自动生成 importmaps 的工具等。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。