Rails 6：如何通过 webpacker 添加 jquery-ui？
Posted
技术标签:
【中文标题】Rails 6：如何通过 webpacker 添加 jquery-ui？【英文标题】：Rails 6: How to add jquery-ui through webpacker? 【发布时间】：2019-12-24 14:41:59 【问题描述】：我目前正在尝试在我的应用程序中实现一个日期选择器，问题是没有关于如何通过 webpacker 添加jquery-ui-rails gem 的文档。
可能还有其他方法可以添加宝石或其他适合我需要的宝石？
【问题讨论】：
不要使用 gems 仅仅添加 javascript 库，使用 yarn 处理 javascript 依赖项并使用 yarnpkg.com/en/package/webpack-jquery-ui 安装 jquery-ui。 尝试使用 yarn 安装 jquery-ui，但这并不能使其可用于其他 javascript 文件。我认为它需要作为插件添加到 webpack 中，类似于 jQuery，但我无法让它工作，所以我目前正在使用 sprockets 用于 jquery 和 jquery-ui，直到我可以使用 yarn/webpack 获得令人满意的解决方案. 【参考方案1】：您不再需要将 javascript 库添加为 gem（由捆绑程序管理）。相反，您使用 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' />
【讨论】：
只是想指出，对于新手，您需要在更新config/webpack/environment.js 后重新启动您的 Rails 服务器，否则这将不起作用。这个答案有效，并帮助我解决了 jquery ui 的问题。在此处开发 Rails 6 应用程序。也为非常详细的答案竖起大拇指！
谢谢@RicardoGreen - 我已经用你的建议更新了我的答案
jQuery.ui 仍然为我返回 undefined
对我来说，当我更改 aliasConfig 时工作： const aliasConfig = 'jquery': 'jquery/src/jquery', 'jquery-ui': 'jquery-ui-dist/jquery-ui.js ' ;
你是我的英雄。我在这个问题上苦苦挣扎了 3 个小时。无法重新定义 jquery-ui。【参考方案2】：
这些答案都不适合我。以下是我最终实现它的方式：
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
【讨论】：
有人遇到以下问题吗？CssSyntaxError: /Users/username/Project/my_rails_app/jquery-ui.css:1:1: Unknown word
这实际上有效，除了......由于某种原因，当我仅通过 application.js 加载它时，jQuery.ui 对象未定义（除了 jQuery 已定义），但这是如果我将 require("jquery-ui-dist/jquery-ui"); 添加到我正在处理的页面上的 pack 中（顺便提一下，它通过 Rails 布局中的 javascript_pack_tag 作为自己的包加载）
如果我将 require("jquery-ui-dist/jquery-ui"); 添加到包中（除了 application.js），那么 jQuery.ui 在该模块中和调试控制台中都可以使用— 不知道为什么会出现这种效果【参考方案3】：
$ yarn add webpack-jquery-ui
在 application.js 中
require('webpack-jquery-ui');
require('webpack-jquery-ui/css');
为我完成了这项工作。 （我之前设置过 jquery，可能需要一些额外的配置）
网址：https://www.npmjs.com/package/webpack-jquery-ui
（这与 Tushar Patil 的回答中的过程相同，但使用另一个包）。
【讨论】：
【参考方案4】：卡尔曼的回答对我有用，虽然不是从一开始就（我将它写在一个单独的答案中，因为我还没有足够的声誉来评论原始答案:)）
所以，请注意，当您将 require("jquery-ui") 放入 app/javascript/packs/application.js 时，jquery-ui 提供的功能将无法在您使用 javascript_pack_tag 加载到单个视图的脚本中使用
原因是这些单独的脚本会在 application.js 加载之前加载。
为了使它工作，我必须将 require("jquery-ui") 放入依赖于 jquery-ui 的单个脚本之一中
顺便说一句，它在 Kalman 的示例中有效，因为他在需要“jquery-ui”之后直接在 application.js 中编写了他的脚本
【讨论】：
【参考方案5】：Kalman 的回答将 jQuery 置于 app/javascript 目录中的脚本范围内，但不包括您网页上可能拥有的任何内嵌 JavaScript。
如果你想从网页范围内访问jQuery，你可以把jQuery放在public目录下，然后修改app/views/layouts/application.html.erb链接到它：
<!DOCTYPE html>
<html>
<head>
<title>JqueryTest</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<script src="/jquery-3.4.1.js"></script>
<%= stylesheet_link_tag "/jquery-ui-1.12.1.custom/jquery-ui.min.css" %>
<script src="/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
</head>
<body>
<%= yield %>
</body>
</html>
【讨论】：
我认为这违背了 Webpacker 和 ES6+ 导入/导出的目的 同样，您可能会将自己与冲突或不同版本的 jQuery 混淆——一个从 webpacker 加载，另一个从您的public/ 目录加载【参考方案6】：
以上步骤工作正常，删除了额外步骤
以下步骤对我有用，以使 jquery-ui 在 Rails 6 中工作：
1) 在终端上，在您的应用程序类型中：yarn add jquery-ui-dist
2) 在 app/javascript/packs/application.jsrequire("jquery-ui-dist/jquery-ui");
3) 在 application.html.erb 中，包含 jquery-ui 主题
4) 重启 rails server 和 webpack dev server。
【讨论】：
某些东西丢失了jquery.ui 没有为我加载
仍将jQuery.ui 视为未定义【参考方案7】：
对我来说，是几篇文章的混合体，效果很好，看起来最优雅
CLI：
yarn add jquery jquery-ui-dist
app/javascript/packs/application.js：
// ... SNIP ...
require("jquery")
require("jquery-ui")
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'
)
)
const aliasConfig =
'jquery': 'jquery/src/jquery',
'jquery-ui': 'jquery-ui-dist/jquery-ui.js'
;
environment.config.set('resolve.alias', aliasConfig);
module.exports = environment
app/views/layouts/application.html.erb
<%= stylesheet_link_tag '//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css' %>
【讨论】：
【参考方案8】：-
在终端上运行 (CLI)
纱线添加 jquery jquery-ui-dist
-
添加到 config/webpack/environment.js
... const webpack = require("webpack") environment.plugins.append("Provide", new webpack.ProvidePlugin( $: 'jquery', jQuery: 'jquery' ) ) const aliasConfig = 'jquery': 'jquery/src/jquery', 'jquery-ui': 'jquery-ui-dist/jquery-ui.js' ; environment.config.set('resolve.alias', aliasConfig); ...
-
app/javascript/packs/application.js:
require("jquery-ui")
-
为主题添加代码到任何 scss 文件。请根据您的需要进行更改。
.ui-autocomplete position: absolute; top: 100%; left: 0; z-index: 1000; float: left; display: none; min-width: 160px; padding: 4px 0; margin: 0 0 10px 25px; list-style: none; background-color: #ffffff; border-color: #ccc; border-color: rgba(0, 0, 0, 0.2); border-style: solid; border-width: 1px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; *border-right-width: 2px; *border-bottom-width: 2px; .ui-menu-item > a.ui-corner-all display: block; padding: 3px 15px; clear: both; font-weight: normal; line-height: 18px; color: #555555; white-space: nowrap; text-decoration: none; .ui-state-hover, .ui-state-active color: #ffffff; text-decoration: none; background-color: #0088cc; border-radius: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px; background-image: none;
【讨论】：
以上是关于Rails 6：如何通过 webpacker 添加 jquery-ui？的主要内容，如果未能解决你的问题，请参考以下文章
如何通过 Webpacker 使用 Rails 6.1 安装 Alpine JS 3
如何通过 Yarn 将 JS 插件添加到 Rails 6 应用程序
Rails 6 + Webpacker：未捕获的类型错误：$(...).select2 不是函数
如何将 toastr-rails gem 添加到 Rails 6 项目？