Rails 6 + Webpack + jQuery 刷新时不保存更改

Question

我正在尝试修复 Rails 6 + Webpack 应用程序中的一些控制台错误，即使在更改后我重新启动服务器，更改似乎也没有保存。

例如，我得到这个错误：

datatables.js:32 Uncaught TypeError: Cannot read property 'isDataTable' of undefined
    at HTMLDocument.<anonymous> (datatables.js:32)
    at HTMLDocument.dispatch (jquery.js:4588)
    at HTMLDocument.elemData.handle (jquery.js:4408)
    at Object../node_modules/turbolinks/dist/turbolinks.js.e.dispatch (turbolinks.js:75)
    at r.notifyApplicationAfterPageLoad (turbolinks.js:994)
    at r.pageLoaded (turbolinks.js:948)
    at turbolinks.js:872

为了修复它，我将违规行更改为：

$(document).on('turbolinks:load', function() {
  if (!$.fn.dataTable.isDataTable("table")) {
    $("table").DataTable();
  }
});

我重启了服务器，连浏览器和整个电脑都重启了（以防万一），但是错误依旧。当我查看源代码时，似乎我没有更改代码，但在编辑器中我看到了更新版本。我所做的每一次更改都会发生这种情况，我想我遗漏了一些明显的东西。

感谢您的帮助！

Answer 1

很有可能 webpack 由于语法错误或缺少模块而无法编译您的源代码。运行 bundle exec bin/webpack-dev-server 在另一个控制台中 window 以在您更改源代码时查看正在进行的编译（有错误）。或者您可以发出 rake webpacker:compile 以手动构建包。

您可以运行 rails server 和 webpack-dev-server 在同一个 window 中使用 Procfile 和 foreman gem例如。

Answer 2

尝试将您的库添加到 body 标签下方 applicatiob_vendor：经验值：

<body>
 #main-content........
 #footer.............
 = javascript_include_tag 'application_vendor'
</body>

然后创建 application_vendor.js 并需要你的 js 库。接下来，添加到您的 asset.rb

Rails.application.config.assets.precompile += %w[ application_vendor.js ]

希望对你有用

Answer 3

如果您将 Rails 6+ 与 webpacker 一起使用，另一个原因是您的 rails 应用程序不编译 app/assets 而是使用新的 `app/javascripts ' 没有您的 CSS 文件的文件夹。

如果是这样，您可以参考此线程以获取有关如何将 app/assets/stylesheets 包含在 webpack 构建中的解决方案。

Rails 6 + Webpack + jQuery 刷新时不保存更改

Rails 6 + Webpack + jQuery doesn't save changes when refreshed

jquery

ruby-on-rails

datatables

webpacker

ruby-on-rails-6