
[英]How to Install Alpine JS 3 with Rails 6.1 via Webpacker
[英]Rails 6 Webpacker: Attempting to install jQuery and JS library
快速演示应用: https : //github.com/ratahtatah/flickedyflack
TypeError: $(...).flickity is not a function
require("@rails/ujs").start()
require("@rails/activestorage").start()
require("channels")
require("jquery")
require("flickity")
import "flickity/dist/flickity.min.css";
$(".main-carousel").flickity({
contain: true
});
const { environment } = require('@rails/webpacker')
const webpack = require('webpack')
environment.plugins.prepend(
'Provide', new webpack.ProvidePlugin({
$: 'jquery/src/jquery',
jQuery: 'jquery/src/jquery',
flickity: 'flickity/dist/flickity.pkgd.min'
})
)
module.exports = environment
No errors, but also no initialization
var $ = require('jquery');
var jQueryBridget = require('jquery-bridget');
var Flickity = require('flickity');
jQueryBridget('flickity', Flickity, $);
$(".main-carousel").flickity({
contain: true
});
{
"name": "flicketyflack",
"private": true,
"dependencies": {
"@rails/actioncable": "^6.0.0",
"@rails/activestorage": "^6.0.0",
"@rails/ujs": "^6.0.0",
"@rails/webpacker": "4.2.2",
"flickity": "^2.2.1",
"jquery": "^3.4.1",
"jquery-bridget": "^2.0.1",
"turbolinks": "^5.2.0"
},
"version": "0.1.0",
"devDependencies": {
"webpack-dev-server": "^3.10.3"
}
}
也许您需要使用 jquery-bridget 将 Flickity 初始化为 jQuery 插件。
yarn add jquery-bridget
然后在 application.js
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
});
});
如果您没有使用 turbolinks,请尝试以下操作:
$(document).ready(function() {
$(".main-carousel").flickity({
contain: true
});
});
尝试将此行添加到您的 application.js
import $ from 'jquery';
在$(".main-carousel").flickity...
之前添加它$(".main-carousel").flickity...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.