Shakapacker，Rails，React：不加載非反應的應用程序/資產 javascript

Question

我將我的應用程序更新到 Rails 7 並將其從 webpacker 移動到 shakapacker。

它主要是一個反應前端，在 haml 中有一些舊頁面，其中 jquery 監聽 app/assets 中的 js 文件。

Shakapacker 和 react 前端工作正常，rails 視圖加載（它們甚至不需要 webpacker 運行），但 jquery 偵聽器沒有運行/收聽 rails 視圖。

應用程序/資產/javascripts/application.js

正在加載，我可以通過登錄到控制台看到。

該文件如下所示：

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's
// vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
console.log('Hello World from Webpacker 2')
// = require jquery-3.3.1.min
//= require popper
//= require rails-ujs
//= require cable
//= require jquery-ui
//= require activestorage
//= require bootstrap
//= require bootstrap-select
//= require moment
//= require tempusdominus-bootstrap-4
//= require jquery.easy-autocomplete.min
//= require jquery.slimscroll.min
//= require patch_modal
//= require_tree

當使用 react 前端的 rails 路由被命中時，React 應用程序被加載： <%= javascript_pack_tag 'react_app', crossorigin: "anonymous" %> <%= stylesheet_pack_tag 'react_app', crossorigin: "anonymous" %>

我還需要配置其他什么東西來讓我在 app/assets/javascripts/*.js 中的 js 文件使用 shakapacker 進行編譯嗎？

我覺得它只適用於 webpacker，我還嘗試了一些其他編譯器（jsbuild、vite），也很好。 我不得不停止與他們一起解決我的 React 方面的其他問題。

任何建議或指示都非常感謝。 我覺得我花了太長時間讓 Rails 7 對前端感到滿意。

謝謝！！

Answer 1

app/
├─ assets/              # used by sprockets-rails
│  └─ javascripts/      # not used in rails 7 by default
│     └─ application.js # javascript_include_tag "application"
│
└─ javascript/          # used by shakapacker and other js bundlers
   ├─ packs/            # webpack entries
   │  └─ application.js # javascript_pack_tag "application"
   │
   └─ application.js    # or this one (depending on `source_entry_path` in config/webpacker.yml)

Shakapacker不應該處理assets/javascripts/application.js ，因為它不知道如何處理//= require指令。 它們由鏈輪處理。

要加載assets/javascripts/application.js ，請將其添加到您的布局中：

<%= javascript_include_tag "application" %>

並仔細檢查manifest.js ，它應該有application.js ：

//= link application.js

Sprockets //= 需要 jsbundling-rails (esbuild) - 如何包含 gem 提供的 JS？

---

Sprockets指令僅在文件頂部處理：

// This is processed by sprockets and popper is required.
//= require popper
console.log("loaded")
// After any code, it is a regular comment, nothing happens.
//= require popper

https://github.com/rails/sprockets#directives