如何在 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 

我认为它会有所帮助。

谢谢