Ruby on Rails项目中如何将编译生成的JS导入Webpacker的application.js？

我来帮你搞定这个导入难题——核心问题是Webpacker默认的模块解析范围不包含app/assets/javascripts目录，所以你直接写'generated'时Webpack找不到对应文件。下面是几个可行的解决方案，按推荐程度排序：

方案一：调整Webpacker配置，添加assets目录到解析路径（推荐） #

这是最灵活的长期解决方案，能让Webpack自动识别assets目录下的所有文件：

• 打开项目根目录的config/webpacker.yml，找到resolved_paths配置项，把app/assets/javascripts加进去：

  resolved_paths:
    - app/assets/javascripts
  

• 重启Webpacker开发服务器（执行bin/webpack-dev-server），让配置生效。
• 现在就可以直接用目录+文件名的方式导入了，注意要明确指定文件名（Webpack不会自动扫描目录下的文件，除非额外配置main字段）：

  // app/javascript/packs/application.js
  // 如果是默认导出
  import HelloWorld from 'generated/welcome'
  // 如果是命名导出，要改成
  import { HelloWorld } from 'generated/welcome'
  

方案二：使用相对路径导入（快速临时方案） #

如果你不想修改配置，也可以用相对路径直接定位到目标文件。假设你的application.js在app/javascript/packs/目录下，那么相对路径应该是：

import HelloWorld from '../../assets/javascripts/generated/welcome'

缺点是如果后续项目文件结构变动，这个路径可能会失效，不如方案一稳定。

方案三：调整TypeScript编译输出路径（贴合Webpacker规范） #

既然用了Webpacker，更推荐把TypeScript的编译输出放到Webpacker默认识别的app/javascript目录下：

• 修改你的tsconfig.json或者rake assets:tsc任务的配置，把生成的welcome.js输出到app/javascript/generated/目录。
• 之后导入就变得非常简单：

  import HelloWorld from './generated/welcome'
  

额外检查点 #

• 确认welcome.js里的导出方式正确：如果是默认导出，要有export default HelloWorld;；如果是命名导出，是export const HelloWorld = ...;，导入语法要和导出方式对应。
• 执行rake assets:tsc后，去目标路径确认文件确实生成了，没有拼写错误。

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