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

Question

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

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

Answer 1

验证设置

将 jsbundling-rails gem 添加到 Gemfile 后gem "jsbundling-rails" 并安装(参见 documentation on the repo for installation )，您可能需要使用命令 yarn build --watch 启动 javascript watcher。

添加自定义 JavaScript

您可以将自定义 JavaScript 添加到/app/javascript 目录，然后将其链接到 application.js。添加自定义 javascript 后， bundler 应在/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": []
}