如何在Rails 7 + ESBuild项目中暴露intl-tel-input的utils.js？

要解决node_modules目录无法被浏览器直接访问的问题，你可以通过以下两种方法将utils.js放到Rails的可访问资源路径中，配合intl-tel-input的utilsScript配置实现懒加载：

方法一：用ESBuild复制插件同步文件 #

这种方法能保持依赖文件自动同步，无需手动复制或链接：

1. 安装ESBuild的复制插件：

npm install esbuild-copy-plugin --save-dev

2. 修改项目根目录的esbuild.config.js，添加插件配置：

const copy = require('esbuild-copy-plugin');

require("esbuild").build({
  entryPoints: ["app/javascript/application.js"],
  bundle: true,
  outdir: "app/assets/builds",
  plugins: [
    copy({
      assets: [
        {
          from: ['./node_modules/intl-tel-input/build/js/utils.js'],
          to: ['./utils.js']
        }
      ],
    })
  ]
}).catch(() => process.exit(1))

3. 重新运行ESBuild构建（npm run build或bin/dev），utils.js会被自动复制到app/assets/builds目录。
4. 在初始化intl-tel-input时，使用Rails的asset路径辅助方法配置utilsScript：

const input = document.querySelector("#phone");
window.intlTelInput(input, {
  utilsScript: "<%= asset_path('utils.js') %>"
});

如果是在纯JS文件中无法直接使用ERB，可先在页面模板中将asset路径存为全局变量，再在JS中引用。

方法二：通过Rails Asset Pipeline预编译 #

这种方法利用Rails自带的资源管理机制：

1. 在app/assets/javascripts目录下创建指向utils.js的符号链接，避免手动复制文件：

ln -s ../../node_modules/intl-tel-input/build/js/utils.js app/assets/javascripts/intl-tel-utils.js

2. 修改config/initializers/assets.rb，将这个文件加入预编译列表：

Rails.application.config.assets.precompile += %w( intl-tel-utils.js )

3. 配置intl-tel-input时使用对应的asset路径：

window.intlTelInput(input, {
  utilsScript: "<%= asset_path('intl-tel-utils.js') %>"
});

两种方法的核心逻辑都是将utils.js转移到Rails允许浏览器访问的静态资源目录（app/assets下的目录或app/assets/builds），这样浏览器就能正常加载该脚本。

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