DEV Community
·
Importmap还是jsbundling？我两者都用
💡
原文英文，约700词，阅读约需3分钟。
📝
内容提要
从Rails 7开始，Importmap成为默认的JavaScript加载方式，利用HTTP/2的并行下载和缓存。对于复杂的JS库，可以结合jsbundling和Importmap：先用jsbundling打包依赖，再用Importmap导入。这种方法解决了Importmap处理复杂依赖的问题，并保持了缓存优势。
🎯
关键要点
- 从Rails 7开始，Importmap成为默认的JavaScript加载机制。
- Importmap利用HTTP/2的并行下载和缓存机制，避免每次更改时都下载所有代码。
- Importmap提供了pin功能，可以将JS文件从CDN下载并配置到项目中。
- 某些JS库假设开发者会使用打包工具，导致源代码分散在多个文件中。
- 使用Importmap pin时，可能会遇到依赖不完整的问题，尤其是对于Lit库。
- 可以通过先使用jsbundling打包依赖，再用Importmap导入的方式解决复杂依赖问题。
- 需要修改Rails项目的配置以解决jsbundling和Importmap的冲突。
- 创建app/javascript/src/文件夹并添加lit.js文件以导出Lit库。
- 通过yarn安装lit包，并在config/importmap.rb中添加相应配置。
- 整个工作流程是esbuild编译源代码，处理后通过Importmap进行模块导入。
- 这种方法虽然打破了无构建的期望，但仍然利用了细粒度缓存，适用于复杂依赖的处理。
❓
延伸问答
Importmap是什么，它的主要功能是什么？
Importmap是Rails 7开始默认的JavaScript加载机制，主要功能是利用HTTP/2的并行下载和缓存，避免每次更改时都下载所有代码。
如何解决Importmap在处理复杂依赖时遇到的问题？
可以通过先使用jsbundling打包依赖，再用Importmap导入的方式来解决复杂依赖问题。
使用Importmap时可能遇到哪些问题？
使用Importmap时可能遇到依赖不完整的问题，尤其是对于某些JS库，如Lit库，可能会导致导入失败。
如何在Rails项目中配置jsbundling和Importmap？
需要修改Rails项目的配置，移除冲突的javascript_include_tag，并在package.json和config/application.rb中进行相应的修改。
Importmap的pin功能有什么用？
Importmap的pin功能可以将JS文件从CDN下载并配置到项目中，方便管理和使用外部依赖。
使用esbuild和Importmap的工作流程是怎样的？
工作流程是esbuild编译源代码，处理后通过Importmap进行模块导入，确保模块可以在应用的JS代码中被导入。
🏷️
标签
➡️
