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

Question

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

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

Answer 1

验证设置

一旦 jsbundling-rails gem 添加到 Gemfile gem "jsbundling-rails" 并安装（参见 documentation on the repo for installation），您可能需要使用命令 yarn build --watch.

启动 javascript 监视程序

添加自定义 JavaScript

您可以将自定义 JavaScript 添加到 /app/javascript 目录，然后将其 link 添加到 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": []
}

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

How to import JS files with esbuild & jsbundling-rails

ruby-on-rails

esbuild

jsbundling-rails

验证设置

添加自定义 JavaScript

例子