Rails 6、Webpacker 和 Flickity
快速演示应用程序:https://github.com/ratahtatah/flickedyflack
尝试 1:纯 jQuery
TypeError: $(...).flickity is not a function
应用程序/javascript/packs/application.js
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
});
config/webpack/environment.js
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
尝试 2:使用 jQueryBridget 进行 jQuery(熊飞飞)
No errors, but also no initialization
应用程序/javascript/packs/application.js
var $ = require('jquery');
var jQueryBridget = require('jquery-bridget');
var Flickity = require('flickity');
jQueryBridget('flickity', Flickity, $);
$(".main-carousel").flickity({
contain: true
});
package.json
{
"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
});
});
如果您不使用 Turbolink,请尝试以下操作:
$(document).ready(function() {
$(".main-carousel").flickity({
contain: true
});
});
关于javascript - Rails 6 Webpacker : Attempting to install jQuery and JS library,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60160393/