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

Posted

技术标签:

【中文标题】Rails 6 + Webpack + jQuery 刷新时不保存更改【英文标题】:Rails 6 + Webpack + jQuery doesn't save changes when refreshed 【发布时间】: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库了吗? 【参考方案1】:

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

您可以使用 Procfileforeman gem 在同一窗口中同时运行 rails serverwebpack-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://***.com/a/59870385 以获取有关如何在 webpack 构建中包含 app/assets/stylesheets 的解决方案。

【讨论】:

以上是关于Rails 6 + Webpack + jQuery 刷新时不保存更改的主要内容,如果未能解决你的问题,请参考以下文章

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

Rails 6 + Webpack、数据表、jQuery

带有 Webpack 和 Yarn 的 Rails 6 上的 ActionController 路由错误

让 Ruby-on-Rails 6/Webpack + Bootstrap 一起正常工作的问题

使用 Webpack 在 Rails 6 上设置 Bootstrap 4.3

$(...).tooltip 不是一个函数 rails 6 webpack