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

【问题标题】：Adding jQuery Plugin (owl carousel) via Yarn to Rails 6 project通过 Yarn 将 jQuery 插件（owl carousel）添加到 Rails 6 项目
【发布时间】：2020-04-29 21:01:20
【问题描述】：

我仍然对 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 不是函数

【问题讨论】：

标签： ruby-on-rails hadoop-yarn owl-carousel ruby-on-rails-6

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

【讨论】：