arn*_*las 9 jquery-ui ruby-on-rails webpacker ruby-on-rails-6
我目前正在尝试在我的应用程序中实现一个日期选择器，问题是没有关于如何jquery-ui-rails通过 webpacker添加gem 的文档。
可能还有另一种方法可以添加宝石或其他适合我需要的宝石？
Kal*_*man 23
您不再需要将 javascript 库添加为 gems（由捆绑器管理）。相反，您使用 yarn 添加它们，它们由 webpack 管理（通过将 webpacker gem 添加到 Gemfile 来启用）。
以下步骤对我有用，可以让 jquery-ui 在 Rails 6 中工作：
yarn add jquery-ui-dist
config/webpack/environment.js需求如下：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
重启你的 Rails 服务器
在 中application.html.erb，包括jquery-ui主题：
<!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：注意：如果您想在views文件夹中使用 jQuery ，请使其全局可用
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
// THIS IS MAKING jQuery AVAILABLE EVEN INSIDE Views FOLDER
global.$ = require("jquery")
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' } );
})
这将适用于如下所示的页面：
<div id='fadeMe'>I will fade</div>
City: <input type='text' id='cityField' />
Calendar: <input type='text' id='calendarField' />
小智 6
这些答案都不适合我。这是我最终实现它的方式：
yarn add jquery
然后
yarn add jquery-ui-dist
在您的 app/javascript/packs/application.js 文件中：
// jquery
import $ from 'jquery';
global.$ = $
global.jQuery = $
require('jquery-ui');
// jquery-ui theme
require.context('file-loader?name=[path][name].[ext]&context=node_modules/jquery-ui-dist!jquery-ui-dist', true, /jquery-ui\.css/ );
require.context('file-loader?name=[path][name].[ext]&context=node_modules/jquery-ui-dist!jquery-ui-dist', true, /jquery-ui\.theme\.css/ );
在 config/webpack/environment.js 中：
const { environment } = require('@rails/webpacker');
const webpack = require('webpack');
// resolve-url-loader must be used before sass-loader
environment.loaders.get('sass').use.splice(-1, 0, {
loader: 'resolve-url-loader',
options: {
attempts: 1
}
});
// Add an additional plugin of your choosing : ProvidePlugin
environment.plugins.prepend('Provide', new webpack.ProvidePlugin({
$: 'jquery',
JQuery: 'jquery',
jquery: 'jquery',
'window.Tether': "tether",
Popper: ['popper.js', 'default'], // for Bootstrap 4
})
)
const aliasConfig = {
'jquery': 'jquery/src/jquery',
'jquery-ui': 'jquery-ui-dist/jquery-ui.js'
};
environment.config.set('resolve.alias', aliasConfig);
//
module.exports = environment;
重新启动我的服务器使它对我来说工作正常。这是我用来使其工作的 webpacker 详细信息的链接：
https://gist.github.com/maxivak/2612fa987b9f9ed7cb53a88fcba247b3#jquery-jquery-ui
| 归档时间： |
|
| 查看次数： |
11315 次 |
| 最近记录： |