获取不是基于 jquery 的库 Rails 6 Webpack 的函数错误

Question

我尝试了多种方法来让 JQuery 为诸如 datetimepicker() owlcarousel() 和其他各种基于 jquery 的组件之类的库进行初始化。我对将 jquery 用于语义用户界面没有任何问题——这很奇怪。但是，JQuery 不适用于我在项目中使用的任何其他内容。我目前正在运行 Rails 6/ruby 2.6.3。我将列出我拥有的错误/webpack 配置。 如何设置 jQuery 以在全球范围内工作？

错误

jQuery.Deferred exception: $(...).owlCarousel is not a function TypeError: $(...).owlCarousel is not a function

Application.js

window.jQuery = $;
window.$ = $;
window.moment = moment;
window.ActiveStorageDragAndDrop = ActiveStorageDragAndDrop;


import {} from 'jquery-ujs'
import "./semantic.min"
import "cocoon";
import "./data-confirm-modal-semantic-ui"
import "./jquery.maskMoney"
import "./datepicker.min"
import "./datepicker.en"
import "./trix"
import "./tablesort"
import "./jquery.tagsinput-revisited"
import "@client-side-validations/simple-form"
import * as ActiveStorageDragAndDrop from "active_storage_drag_and_drop"
import moment from 'moment'
import "./jquery.daterangepicker.min"
import "owl.carousel";

require('@client-side-validations/client-side-validations');
require("chartkick");
require("chart.js");
require("@rails/activestorage").start();
require("channels");
require('jquery');

ActiveStorageDragAndDrop.start();

environment.js

 const {environment} = require('@rails/webpacker');
    const webpack = require('webpack');

    environment.plugins.prepend('Provide',
        new webpack.ProvidePlugin({
            $: 'jquery/src/jquery',
            jquery: 'jquery/src/jquery',
            jQuery: 'jquery/src/jquery', 'window.jQuery': 'jquery/src/jquery',
            moment: 'moment'
        })
    );

    module.exports = environment;

package.json

{
  "name": "test_app_sys",
  "private": true,
  "dependencies": {
    "@client-side-validations/client-side-validations": "^0.1.1",
    "@client-side-validations/simple-form": "^0.1.1",
    "@fortawesome/fontawesome-free": "^5.12.1",
    "@rails/actioncable": "^6.0.0-alpha",
    "@rails/activestorage": "^6.0.0-alpha",
    "@rails/webpacker": "^4.0.7",
    "@yaireo/tagify": "yaireo/tagify",
    "active_storage_drag_and_drop": "^0.3.4",
    "chart.js": "^2.9.3",
    "chartkick": "^3.2.0",
    "cocoon": "github:nathanvda/cocoon#c24ba53",
    "flow-webpack-plugin": "^1.2.0",
    "jquery": "^3.4.1",
    "jquery-ujs": "latest",
    "moment": "^2.24.0",
    "owl.carousel": "^2.3.4",
    "stimulus": "^1.1.1"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.9.0"
  }
}

Answer 1

您可以添加到您的 app/javascript/packs/application.js：

// export jquery to global
var jQuery = require('jquery')
// include jQuery in global and window scope (so you can access it globally)
// in your web browser, when you type $('.div'), it is actually refering to global.$('.div')
global.$ = global.jQuery = jQuery;
window.$ = window.jQuery = jQuery;

我从这里通过 Webpacker 为 Rails 6 上的其他 puglins 启用 jQuery：https://rubyyagi.com/how-to-integrate-html-bootstrap-theme-into-rails-6/#debugging-javascript-issues