ruby-on-rails - 通过 Yarn 添加 jQuery 插件(owl carousel)到 Rails 6 项目

Question

我对在 Rails 6 中处理 jQuery 插件的新方法仍然有些困惑。在 Rails 5 中，我只是将文件添加到我的 libs 文件夹中，并在 css 和 js 文件中需要它们。

现在我正在尝试让 Owl Carousel 与 Yarn 一起工作。我的 Rails 6 项目已经 Bootstrap 和 jquery 工作(flatpickr 工作正常)。

yarn add owl.carousel2

在 application.js 中

import 'owl.carousel2/dist/assets/owl.carousel.css';
import 'owl.carousel2'

webpack环境

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

const webpack = require("webpack")

environment.plugins.append("Provide", new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    Popper: ['popper.js', 'default'],
    'window.jQuery': 'jquery'
}))

module.exports = environment

应用程序.js

$(document).ready(function(){
  $(".owl-carousel").owlCarousel();
});

错误:

TypeError: $(...).owlCarousel is not a function

Answer 1

尝试更改您的 application.js:

import 'owl.carousel2/dist/assets/owl.carousel.css';
import 'owl.carousel2'

收件人:

import owlCarousel from "owl.carousel2";
import "owl.carousel2/dist/assets/owl.carousel.css";

在我的项目中，这导出了 owlCarousel 函数并使消息 TypeError: $(...).owlCarousel is not a function 消失了。