Javascript Rails 6 Webpacker:正在尝试安装jQuery和JS库 Rails 6、Webpacker和

快速演示应用程序：

尝试1：纯jQuery app/javascript/packs/application.js config/webpack/environment.js 尝试2:jqueryw/jQueryBridget（Feifei Xong） app/javascript/packs/application.js package.json

---

尝试将此行添加到application.js

import $ from 'jquery';

var $ = require('jquery');
var jQueryBridget = require('jquery-bridget');
var Flickity = require('flickity');

jQueryBridget( 'flickity', Flickity, $ );

# If your are using turbolinks
$(document).on('turbolinks:load', function() {
  $(".main-carousel").flickity({
    contain: true
  });
});

---

将它添加到

$（“.main carousel”）.flickity…

可能需要使用jquery bridget将flickity初始化为jquery插件

yarn add jquery-bridget

然后在application.js中

import $ from 'jquery';

var $ = require('jquery');
var jQueryBridget = require('jquery-bridget');
var Flickity = require('flickity');

jQueryBridget( 'flickity', Flickity, $ );

# If your are using turbolinks
$(document).on('turbolinks:load', function() {
  $(".main-carousel").flickity({
    contain: true
  });
});

如果未使用TurboLink，请尝试以下操作：

$(document).ready(function() {
  $(".main-carousel").flickity({
    contain: true
  });
});

---

你能发布你的

package.json

@feifeixing全部完成：）有趣！我没有收到任何错误，但它也没有初始化。我正在将演示应用推送到GitHub，请稍候！在问题中添加了你的例子，我希望没问题。干杯。嗨@MarkBoulder，你说不初始化是什么意思？有什么错误吗？我注意到你评论了导入“flickity/dist/flickity.min.css”，你能重新添加css并检查它是否有效吗？嗨@MarkBoulder，我注意到你评论了

require（“turbolinks”）.start（）

，你能重新添加它并添加我在回答中更新的代码吗？嗨@MarkBoulder，我更新了我不使用turbolinks的回答。

import $ from 'jquery';

yarn add jquery-bridget

var $ = require('jquery');
var jQueryBridget = require('jquery-bridget');
var Flickity = require('flickity');

jQueryBridget( 'flickity', Flickity, $ );

# If your are using turbolinks
$(document).on('turbolinks:load', function() {
  $(".main-carousel").flickity({
    contain: true
  });
});

$(document).ready(function() {
  $(".main-carousel").flickity({
    contain: true
  });
});