9

我目前正在尝试在我的应用程序中实现一个 datepicker，问题是没有关于如何jquery-ui-rails通过 webpacker 添加 gem 的文档。

可能还有另一种方法可以添加宝石或其他适合我需要的宝石？

4

8 回答 8

24

您不再需要将 javascript 库添加为 gem（由捆绑程序管理）。相反，您使用 yarn 添加它们，它们由 webpack 管理（通过将 webpacker gem 添加到 Gemfile 来启用）。

以下步骤对我有用，以使 jquery-ui 在 Rails 6 中工作：

  1. 在终端上，在您的应用程序类型中：
yarn add jquery-ui-dist
  1. 您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

  1. 重启你的 Rails 服务器

  2. 在 中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>
  1. 现在，在您的 中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' />
于 2019-10-27T14:48:02.540 回答
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

于 2019-12-27T01:20:08.300 回答
4 
$ 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 的答案相同，但使用另一个包）。

于 2020-05-29T10:52:07.833 回答
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 中编写了他的脚本

于 2020-12-14T12:42:32.660 回答
0

以上步骤工作正常，删除了额外的步骤

以下步骤对我有用，以使 jquery-ui 在 Rails 6 中工作：

1）在终端上，在您的应用程序类型中：
yarn add jquery-ui-dist

2) 在 app/javascript/packs/application.js 中
需要("jquery-ui-dist/jquery-ui");

3）在application.html.erb中，包含jquery-ui主题

<%= stylesheet_link_tag '//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/le-frog/jquery-ui.min.css' %>

4) 重启 rails server 和 webpack dev server。

于 2020-03-29T15:28:11.350 回答
0

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>
于 2019-10-28T18:05:00.620 回答
0
  1. 在终端上运行 (CLI)

纱线添加 jquery jquery-ui-dist

  1. 添加到 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);
...
  1. 应用程序/javascript/packs/application.js：

require("jquery-ui")

  1. 对于主题将代码添加到任何 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; }
于 2020-09-28T07:25:02.750 回答
0

对我来说，是几篇文章的混合体，而且效果很好，看起来最优雅

命令行界面：

    yarn add jquery jquery-ui-dist

应用程序/javascript/packs/application.js：

// ... SNIP ...
require("jquery")
require("jquery-ui")

配置/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

应用程序/视图/布局/application.html.erb

<%= stylesheet_link_tag '//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css' %>
于 2020-09-13T23:15:04.993 回答