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

【问题标题】：Rails 6 + Webpack + jQuery doesn't save changes when refreshedRails 6 + Webpack + jQuery 刷新时不保存更改
【发布时间】：2020-01-16 23:56:51
【问题描述】：

我正在尝试修复 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();
  }
});

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

感谢您的帮助！

【问题讨论】：

尝试在无法识别的浏览器窗口中打开它。或者您可以使用 CTRL + SHIFT + R 重新加载浏览器缓存的资产
非常感谢，硬刷新和隐身窗口都会出现同样的情况
你添加Datatable库了吗？

标签： jquery ruby-on-rails datatables webpacker ruby-on-rails-6

【解决方案1】：

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

您可以使用 Procfile 和 foreman gem 在同一窗口中同时运行 rails server 和 webpack-dev-server。

【讨论】：

非常感谢！做到了，我的 webpack 配置中缺少一个逗号，这就是它没有正确加载的原因。由于某种原因，它仍然显示有关数据表的相同错误，我想我会就此提出一个新问题:)

【解决方案2】：

尝试在 applicatiob_vendor 的 body 标记下添加您的库：经验：

<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 ]

希望对你有用

【讨论】：

【解决方案3】：

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

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

【讨论】：