Rails 6:如何通过webpacker添加jquery-ui? [英] Rails 6: How to add jquery-ui through webpacker?
问题描述
我目前正在尝试在应用程序中实现日期选择器，问题是没有文档说明如何通过webpacker添加jquery-ui-rails gem.
I'm currently trying to implement a datepicker into my application, the problem is that there is no documentation on how to add the jquery-ui-rails gem through webpacker.
也许有另外一种添加宝石或其他适合我需求的宝石的方法吗?
Probably there is another way to add gems or another gem that would fit my needs?
推荐答案
您不再需要将JavaScript库添加为gem(由捆绑器管理).取而代之的是，您将它们添加到yarn中，并由webpack(通过将webpacker gem添加到Gemfile中启用)来管理它们.
You no longer need to add javascript libraries as gems (which are managed by the bundler). Instead, you add them with yarn and they are managed by webpack (which is enabled by adding the webpacker gem to the Gemfile).
以下步骤对我有用，以使jquery-ui在Rails 6中正常工作:
The following steps worked for me to get jquery-ui working in Rails 6:
- 在终端上，在您的应用程序中键入:
yarn add jquery-ui-dist
- 您的
config/webpack/environment.js需要看起来如下:
- Your
config/webpack/environment.jsneeds to look as follows:
const { environment } = require('@rails/webpacker')
const webpack = require('webpack')
environment.plugins.prepend('Provide',
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
})
);
const aliasConfig = {
'jquery': 'jquery-ui-dist/external/jquery/jquery.js',
'jquery-ui': 'jquery-ui-dist/jquery-ui.js'
};
environment.config.set('resolve.alias', aliasConfig);
module.exports = environment
- 在
application.html.erb中，包含jquery-ui主题:
- In the
application.html.erb, include thejquery-uitheme:
<!DOCTYPE html>
<html>
<head>
<title>Jquery UI Test</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_link_tag '//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/le-frog/jquery-ui.min.css' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<%= yield %>
</body>
</html>
- 现在，在您的
app/javascript/packs/application.js中，您可以使用jquery-ui:
- Now, in your
app/javascript/packs/application.js, you can usejquery-ui:
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("jquery") // Don't really need to require this...
require("jquery-ui")
$(function(){
// Plain jquery
$('#fadeMe').fadeOut(5000);
// jquery-ui
const availableCities = ['Baltimore', 'New York'];
$('#cityField').autocomplete( { source: availableCities } );
$('#calendarField').datepicker( { dateFormat: 'yy-mm-dd' } );
})
这将适用于如下所示的页面:
This will work for a page that looks as follows:
<div id='fadeMe'>Fade me</div>
City: <input type='text' id='cityField' />
Calendar: <input type='text' id='calendarField' />
这篇关于Rails 6:如何通过webpacker添加jquery-ui?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
