Rails 7中使用Importmaps时，自定义JS文件应存放于何处？

先纠正一个误解 #

Importmaps 不止能处理第三方CDN库，本地自定义JS文件同样可以用它管理，完全适配多视图共享的场景。

存放位置 #

多视图共享的自定义JS文件，直接放在 app/javascript 目录下即可：

• 可以直接在根目录创建单个文件，比如 app/javascript/common.js
• 也可以按功能建子目录分类，比如 app/javascript/shared/validation.js、app/javascript/shared/modal.js

引入步骤 #

1. 在Importmap中注册文件
   编辑 config/importmap.rb，给你的自定义文件添加映射（pin）：

   # 根目录下的文件
   pin 'common', to: 'common.js'
   # 子目录下的文件
   pin 'shared/validation', to: 'shared/validation.js'
   

2. 在application.js中全局导入
   打开 app/javascript/application.js，导入这些自定义文件，这样所有视图都能共享使用：

   import 'common'
   import 'shared/validation'
   

3. 特定视图单独加载（可选）
   如果某个JS只需要在特定视图用，不用全局加载：

   • 先在 app/javascript 下创建对应文件，比如 app/javascript/checkout.js
   • 在 config/importmap.rb 中pin它：pin 'checkout', to: 'checkout.js'
   • 在对应的视图模板里添加引入标签：

     <%= javascript_importmap_tag 'checkout' %>
     

小提示 #

自定义JS要遵循ES模块规范，比如需要给其他文件暴露方法时，用 export 导出，在需要的地方用 import 导入：

// app/javascript/common.js
export function formatPrice(price) {
  return `$${price.toFixed(2)}`
}

// 在其他JS文件中使用
import { formatPrice } from 'common'

内容的提问来源于stack exchange，提问作者Muhammad Ans