ruby-on-rails - 如何在 Rails 6 中使用自定义 jQuery

Question

我已经考虑了几天了。

由于某种原因，我的语义 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

我认为我做对了，但由于某种原因，这个解决方案根本不起作用。知道我做错了什么吗？

Answer 1

查看我的 /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 

我认为这会有所帮助。

谢谢