在使用Rails 5.1的纱线时，我还应该使用Gemfile的javascript库吗？

Question

I'm trying to get some jQuery stuff in Rails 5.1. Since the jQuery support is dropped (by default) I'm getting some hard time to find the exact workflow I should use.

At first I would try some Ajax stuffs but then I realized in the web developer console that '$' was not defined. This confirming that jQuery is indeed not installed by default.

1. The first thing I did is simply put a hard coded jquery cdn script in the application layout view, something like this in app/views/layouts/application.html.erb :

<script  src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>

This worked. But I guess that this is not the supported way of doing it.

2. Then I tried with installing jquery using yarn, since I have a Rails 5.1 installation with yarn already installed.

• I ran yarn add jquery then yarn (seems this last is not necessary)
• I added //= require jquery to the app/assets/javascripts/application.js file

This worked too.
Edit: I just noticed that there is a rails yarn:install command, should I use that instead of the terminal native yarn command?

But then I wanted to play with some jQuery-ui stuffs. Noticing that the package jquery-ui exists in yarn, I did the same thing:

• I ran yarn add jquery-ui then yarn again
• I added //= require jquery-ui to the app/assets/javascripts/application.js file right below the jquery one

But this did not work. Then I noticed that some people refer to jquery gems, particularly the gems jquery-rails and jquery-ui-rails .

My question is despite having a working yarn pipeline , should I still use the related gems?

In my case should I only use these both gems? Or should I only install the jquery-ui-rails one since my jquery installation with yarn is working?

I'm sorry but this asset management thing is not yet get into my head.. And still not yet starting webpack stuffs 😖

Answer 1

I made it work without Rails gems and with yarn packages.

Instead of this

Gemfile:

gem 'jquery-rails'
gem 'jquery-ui-rails'

Solution.

add yarn packages in package.json

{
  ...
  "dependencies": {
    "jquery": "3.2.1",
    "jquery-ui-dist": "1.12.1",
    "jquery-ujs": "1.2.2",
    .. more packages here
  }
}

Note! it uses package jquery-ui-dist (not jquery-ui).

application.js:

//= require jquery/dist/jquery
//= require jquery-ujs
//= require jquery-ui-dist/jquery-ui

About jquery-ui packages: the jQuery-ui package on NPM isn't pre-built and therefore doesn't contain jquery-ui.js; the package will either need built before use or all the widgets included/used individually. Read more in this discussion - jquery-ui and webpack, how to manage it into module? .

Answer 2

您可以查看项目根目录中的node_modules文件夹 - 在那里您将找到所有安装了YARN软件包的文件夹，并且应该有您添加到YARN并想要使用的库的文件夹。