ruby-on-rails - 如何在 Rails 6 中使用自定义 jQuery
问题描述
我已经考虑了几天了。
出于某种原因,我的语义 ui jQuery 不起作用。
所以这就是我所做的。
在我的 webpack/environment.js 上:
const { environment } = require('@rails/webpacker')
const webpack = require('webpack')
environment.plugins.append('Provide', new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
}))
module.exports = environment
我在 app/javascripts/packs 下添加了一个 custom.js 文件,其中包含以下代码:
$(document).on('turbolinks:load', function(){
$('.ui.dropdown').dropdown();
})
然后在我的 application.js w/c 里面 app/javascripts/packs 我有 ff:
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("packs/custom")
在 chrome 控制台上,我看到的是:
Uncaught TypeError: $(...).dropdown is not a function
at HTMLDocument.<anonymous> (custom.js:3)
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
我认为我做对了,但由于某种原因,这个解决方案根本不起作用。知道我在做什么错吗?
解决方案
看我的/confog/webpack/environment.js
文件如下:
const { environment } = require('@rails/webpacker')
const webpack = require('webpack')
environment.plugins.prepend('Provide',
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
Popper: ['popper.js', 'default']
})
)
module.exports = environment
和/app/javascript/packs/application.js
require("jquery")
require("bootstrap")
require("packs/custom") // Here is my custom jQuery file like packs/custom.js
并且/packs/custom.js
看起来像 jQuery 预加载器
// Preloader JS
jQuery(window).on('load', function () {
$('.preloader').fadeOut();
});
正是这种方式,自定义 jQuery 运行良好。
我的项目基于bootstrap 4
所以我运行这个命令来安装依赖项
yarn add bootstrap jquery popper.js
我认为这会有所帮助。
谢谢
推荐阅读
- c++ - 如何使用 C++ 覆盖二进制文件的一部分?
- awk - 使用列数据打印列的 awk 命令
- google-chrome - Chromium 源代码树中的“站点设置”在哪里?
- javascript - 如何在 ReactJS 中使用事件监听器?
- javascript - 出口清单 Fullcalendar en pdf
- ajax - Ajax 请求被禁止 - 错误 403 - strict-origin-when-cross-origin
- r - stat_poly_eq 中的 Gamma(log)
- python - Sqlalchemy 引发 'NotImplementedError: Operator 'getitem' is not supported on this expression' When using 'hybrid_property' in mysql.SET
- r - 将 ggplot2 与 R 中的基图相结合:外观和语法
- angular - 将 @Effect 转换为 createEffect NGRX