如何在 Rails 6 中使用自定义 jQuery答案

【问题标题】：How to use custom jQuery in Rails 6如何在 Rails 6 中使用自定义 jQuery
【发布时间】：2019-10-14 12:05:29
【问题描述】：

我已经考虑了几天了。

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

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

【问题讨论】：

我猜想提供下拉方法的jQuery插件在你调用$('.ui.dropdown').dropdown()的时候还没有初始化。

标签： ruby-on-rails

【解决方案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

我认为这会有所帮助。

谢谢

【讨论】：

【解决方案2】：

yarn add jquery

在 packs/application.js 中

import $ from 'jquery';
window.jQuery = $;
window.$ = $;

【讨论】：

【解决方案3】：

在我的 webpack/environment.js 上：

 module.exports = environment
const webpack = require('webpack')
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery'
  })
)

还有 /app/javascript/packs/application.js

require("jquery")              //add this in application.js
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

运行此命令安装依赖项

  "yarn add jquery"

【讨论】：