已解决：Rails 6+Webpacker+Bootstrap 5部署Heroku后Coffee脚本失效

本地Ubuntu Linux环境下所有功能运行完全正常，但将改动部署到Heroku后，Coffee脚本停止工作，无法定位原因。

尝试对Webpacker进行重配置，还执行了以下命令：rails assets:clobber、bin/webpack --verbose --profile、RAILS_ENV=production bundle exec rake assets:precompile

• 未解决问题。

尝试本地预编译资源：rake assets:precompile后再推送代码到Heroku：git push heroku master

• 未解决问题。

尝试在Heroku远程执行预编译：heroku run rake assets:clean assets:precompile

• 未解决问题。

通过heroku logs --tail查看日志，未发现任何与Coffee相关的错误提示

• 无相关报错信息。

在app/javascript/packs/application.js中插入alert('Some test');可正常触发运行。

备注：搭配Webpacker的Rails 6使用门槛较高，花费了大量时间调试原本在Rails 4、Rails 5中开箱即用的常规功能，目前其他功能已正常运行。

更新1 #

我在init_coffee.coffee文件首行插入alert 'test coffee 1'可正常运行，但如果将提示代码放在$(document).on 'turbolinks:load', ->代码块内则无任何响应。

alert 'test coffee 1' # 正常运行
$(document).on 'turbolinks:load', ->
  alert 'test coffee 2' # 无法运行

更新2 #

Coffee脚本本身无问题，问题出在turbolinks初始化，所有包裹在turbolinks:load事件内的脚本都无法运行。

config/webpacker.yml配置 #

# Note: You must restart bin/webpack-dev-server for changes to take effect

default: &default
  source_path: app/javascript
  source_entry_path: packs
  public_root_path: public
  public_output_path: packs
  cache_path: tmp/cache/webpacker
  check_yarn_integrity: false
  webpack_compile_output: true

  # Additional paths webpack should lookup modules
  # ['app/assets', 'engine/foo/app/assets']
  additional_paths: []

  # Reload manifest.json on all requests so we reload latest compiled packs
  cache_manifest: false

  # Extract and emit a css file
  extract_css: false

  static_assets_extensions:
    - .jpg
    - .jpeg
    - .png
    - .gif
    - .tiff
    - .ico
    - .svg
    - .eot
    - .otf
    - .ttf
    - .woff
    - .woff2

  extensions:
    - .coffee
    - .coffee.erb
    - .mjs
    - .js
    - .sass
    - .scss
    - .css
    - .module.sass
    - .module.scss
    - .module.css
    - .png
    - .svg
    - .gif
    - .jpeg
    - .jpg

development:
  <<: *default
  compile: true

  # Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
    https: false
    host: localhost
    port: 3035
    public: localhost:3035
    hmr: false
    # Inline should be set to true if using HMR
    inline: true
    overlay: true
    compress: true
    disable_host_check: true
    use_local_ip: false
    quiet: false
    pretty: false
    headers:
      'Access-Control-Allow-Origin': '*'
    watch_options:
      ignored: '**/node_modules/**'

#
check_yarn_integrity: true

test:
  <<: *default
  compile: true

  # Compile test packs to a separate directory
  public_output_path: packs-test

production:
  <<: *default

  # Production depends on precompilation of packs prior to booting for performance.
  compile: true

  # Extract and emit a css file
  extract_css: true

  # Cache manifest.json for performance
  cache_manifest: true

app/javascript/packs/application.js配置 #

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

import "stylesheets/application.sass"
import "bootstrap-icons/font/bootstrap-icons.css"

import * as bootstrap from 'bootstrap'
document.addEventListener("DOMContentLoaded", function(event) {
  var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
  var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
    return new bootstrap.Popover(popoverTriggerEl)
  })

  var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
  var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
    return new bootstrap.Tooltip(tooltipTriggerEl, {
      animation: false
    })
  })
})

config/webpack/environment.js配置 #

const { environment } = require('@rails/webpacker')
const customConfig = require('./custom')

// coffee
const coffee = require('./loaders/coffee')
environment.loaders.prepend('coffee', coffee)

// jquery
const webpack = require('webpack')
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery',
    Popper: ['popper.js', 'default']
  })
)

// init
environment.config.merge(customConfig)
module.exports = environment

config/environments/production.rb相关配置片段 #

config.assets.initialize_on_precompile = true
  config.assets.compile = true
  config.assets.js_compressor = :uglifier
  config.serve_static_files = ENV['RAILS_SERVE_STATIC_FILES'].present?

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