在 rails 7 中，当需引入无 es 模块结构的第三方 minified js 库（如传统 `<script>` 直引库）时，应绕过 importmap，改用 sprockets 的 `//= require` 指令进行非侵入式加载，支持集中管理、自动打包与生产环境压缩。</script>
Rails 7 默认推荐 importmap，但它要求脚本具备模块语义（如导出/导入声明），而大量传统第三方库（如 Chart.js v2、jQuery 插件、旧版 Swiper 等）仅通过全局变量（如 window.Chart）暴露 API，直接 import "xxx" 会因缺少 export 导致运行时错误或 ReferenceError。此时，Sprockets 仍是 Rails 官方保留且完全兼容的资产管道方案，专为处理此类“裸 JS”而设计。
✅ 推荐实践：用 Sprockets 加载非模块化 JS
-
组织文件结构（清晰分离第三方代码）：
vendor/ └── javascripts/ ├── chart.min.js # 全局挂载 Chart ├── moment.min.js # 挂载 window.moment └── custom-widget.js # 依赖前两者，调用 Chart & moment -
配置资产路径（让 Sprockets 扫描该目录）：
config/initializers/assets.rbRails.application.config.assets.paths << Rails.root.join("vendor/javascripts") -
创建入口 bundle 文件：
app/assets/javascripts/application_legacy.js（命名任意，但避免 application.js 冲突）//= require_tree ../../../vendor/javascripts // 或按需精确引入（推荐，避免隐式顺序问题）： //= require moment.min //= require chart.min //= require custom-widget
-
注册到 manifest 并引入视图：
app/assets/config/manifest.js//= link application_legacy.js
app/views/layouts/application.html.erb
<%= javascript_include_tag "application_legacy", "data-turbo-track": "reload" %>
⚠️ 注意事项
- 执行顺序至关重要：Sprockets 按 //= require 顺序拼接代码。若 custom-widget.js 依赖 Chart，则 chart.min.js 必须在它之前 require。
- 避免重复引入：不要同时在 importmap.rb 和 Sprockets 中引用同一库，否则可能引发全局变量冲突或重复初始化。
- 生产环境自动压缩：只要 config/environments/production.rb 中启用了默认配置（config.assets.js_compressor = :terser），Sprockets 会自动将所有 application_legacy.js 及其依赖合并、压缩为单个 .js 文件（如 application_legacy-abc123.js）。
- 调试技巧：本地开发时访问 http://localhost:3000/assets/application_legacy.js 可直接查看拼接后的原始内容，验证是否按预期加载及顺序正确。
该方式完全符合 Rails 资产管道设计哲学——不修改原始库、不强制模块化改造、零运行时开销，是集成遗留 JS 生态最稳定、最可维护的标准方案。
