已解决：Rails 6，Webpacker，Bootstrap 5，Heroku 上的 Coffee 无法正常工作

Question

heroku 上的咖啡脚本有问题。

在本地机器上（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...

在日志中没有关于咖啡的任何错误

没有。

当我将：alert('Some test'); 插入我的 app/javascript/packs/application.js 时，它起作用了。

P.S。 Rails 6 使用 Webpacker 是一种探索...我花了很多时间来理解并尝试启用通常的东西，这些东西在 Rails 4 或 5 中开箱即用...不过现在好像好了。

UPD1：我将 alert 'test coffee 1' 插入到我的 init_coffee.coffee 的第一个字符串中，它现在可以工作了，但是如果我在 '$(document).on 'turbolinks:load', ->' 之后插入一些警报，那么什么也不会发生。

alert 'test coffee 1' # worked
$(document).on 'turbolinks:load', ->
  alert 'test coffee 2' # not worked

UPD2：coffeescript 不是问题，turbolinks init 和其中的任何脚本都有问题...

这是我的 config/webpacker.yml http://pastie.org/p/1RqDZ4haTA4yl6k7EV6b4j

# 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?

Answer 1

好的，当我了解到 Coffee Script 不是问题并且 Turbolinks 无法正常工作时，我在这里找到了解决方案：

问题出在 Cloudflare 的 Rocket Loader 中，我将其禁用，现在一切正常。

已解决：Rails 6，Webpacker，Bootstrap 5，Heroku 上的 Coffee 无法正常工作

SOLVED: Rails 6, Webpacker, Bootstrap 5, Coffee on Heroku is not working

ruby-on-rails

heroku

coffeescript

cloudflare

turbolinks