Rails7项目中esbuild目录结构打包及JS目录导入问题

问题 #

我给原本用sprockets处理资源的Rails7项目配置了基于esbuild的jsbundling-rails，目前可直接引用JS文件完成加载。因文件数量较多，希望按逻辑拆分JS目录结构，但尝试直接导入整个base目录时，esbuild提示无法解析路径，想了解该需求是否可行，还是只能在application.js中手动逐个导入文件。

目录结构示例 #

app
- assets
-- javascript
--- some.js
--- some_more.js
---- base
----- some_other.js
----- some_way_other.js

可行的导入方式 #

import "./some"
import "./some_more"
import "./base/some_other"
import "./base/some_way_other"

期望的导入方式 #

import "./some"
import "./some_more"
import "./base"

报错信息 #

15:39:22 js.1   | [watch] build started (change: "app/javascript/application.js")
15:39:22 js.1   | ✘ [ERROR] Could not resolve "./base"
15:39:22 js.1   |
15:39:22 js.1   |     app/javascript/application.js:14:7:
15:39:22 js.1   |       14 │ import "./base"
15:39:22 js.1   |          ╵        ~~~~~~~~
15:39:22 js.1   |
15:39:22 js.1   | 1 error
15:39:22 js.1   | [watch] build finished

Procfile.dev配置 #

web: unset PORT && /root/.rbenv/shims/thin start -C config/thin_development.yml
js: yarn build --watch

解决方案 #

该需求完全可行，无需手动逐个导入，有两种常用实现方式：

1. 目录内创建index.js（推荐，符合ES模块规范） #

在base目录下新建index.js文件，在其中导入该目录下的所有JS文件：

// app/javascript/base/index.js
import "./some_other"
import "./some_way_other"

之后在application.js中直接导入./base即可，esbuild会自动将目录下的index.js作为默认入口文件解析。

2. 使用esbuild的glob批量导入（需版本支持） #

esbuild支持通过import.meta.glob实现批量导入，无需额外配置文件，直接在application.js中写入：

import.meta.glob("./base/*.js").forEach(module => module())

注意：此特性需要esbuild 0.13.0及以上版本支持，导入的模块会被自动执行。

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