在没有构建系统的情况下导入前端 JavaScript 库

主要观点:介绍在无构建系统的情况下导入 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 的工具等。
阅读 12
0 条评论