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
手动构建包。
您可以使用 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://***.com/a/59870385 以获取有关如何在 webpack 构建中包含 app/assets/stylesheets
的解决方案。
【讨论】:
以上是关于Rails 6 + Webpack + jQuery 刷新时不保存更改的主要内容,如果未能解决你的问题,请参考以下文章
Rails 6 + Webpack + jQuery 刷新时不保存更改
带有 Webpack 和 Yarn 的 Rails 6 上的 ActionController 路由错误
让 Ruby-on-Rails 6/Webpack + Bootstrap 一起正常工作的问题