通过 Yarn 添加 jQuery 插件（owl carousel）到 Rails 6 项目

Question

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

现在我正在尝试让 Owl Carousel 与 Yarn 配合使用。我的 Rails 6 项目已经引导和 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 不是函数

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

消失。