如何使用 esbuild 和 jsbundling-rails 导入 JS 文件

Question

我正在将 Rails 6 应用程序从 webpack 和 webpacker 移动到 esbuild 和 jsbundling-rails

如果不使用刺激，我找不到任何有关在 application.js 中导入自定义 js 文件的正确方法的文档。谢谢。

Answer 1

验证设置

将 jsbundling-rails gem 添加到 Gemfile gem "jsbundling-rails"并安装后（请参阅存储库上的安装文档），您可能需要使用以下命令启动 javascript 监视程序yarn build --watch。

添加自定义 JavaScript

您可以将自定义 JavaScript 添加到 /app/javascript 目录，然后将其链接到 application.js。添加自定义 javascript 后，捆绑程序应在 /app/assets/build 目录中编译新的指纹 javascript 文件。

例子

添加new.js到/app/javascript

//new.js

alert('hit')

在 application.js 上链接 new.js

//application.js
// Entry point for the build script in your package.json
import "@hotwired/turbo-rails"
// import "./controllers"
import * as bootstrap from "bootstrap"
import './new.js'

在启动观察程序的终端中，保存新的 javascript 后，它会输出

[watch] build started (change: "app/javascript/application.js")
[watch] build finished

现在 /app/assets/build 中有以下文件

//new.js
(() => {
  // app/javascript/new.js
  alert("hit");
})();
//# sourceMappingURL=new.js.map

//new.js.map
{
  "version": 3,
  "sources": ["../../javascript/new.js"],
  "sourcesContent": ["alert('hit')"],
  "mappings": ";;AAAA,QAAM;",
  "names": []
}