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

Question

我已经思考了几天了。

由于某种原因，我的semantic-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();
})

然后在我的应用程序.js文件中，位于app/javascripts/packs下，我有以下内容：

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

我认为我做得没问题，但出于某些原因这个解决方案根本不起作用。 你有什么想法是我做错了什么吗？

- user6398543

---

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

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 

我认为它会有所帮助。

谢谢。

- fool-dev

Answer 2

yarn add jquery

在 packs/application.js 中

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

- vidur punj

Answer 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"

- shubham