1) Einführung in jQuery >> Bulletin

__1. Jquery mit Garn einführen Jquery hinzufügen __ __2. Schreiben Sie eine Beschreibung zum Hinzufügen von jQuery unter Verwaltung zu environment.js in die Webpack-Konfigurationsdatei __ __3. Schreiben Sie eine Beschreibung zum Aufrufen von jQuery in application.js __ __4. Überprüfen Sie, ob der Javascript-Aufruf in application.html.erb __ beschrieben ist

1) Einführung in jQuery >> Detaillierte Erklärung

1. Jquery mit Garn einführen

Terminal
$ yarn init　*Hinweis: Ich denke nicht, dass dies erforderlich ist, wenn Sie mit Homebrew bereits Garn auf Ihrem Betriebssystem installiert haben.
$ yarn add jquery

__ * Ergänzung: __ Ich habe kein Problem mit nur "Garn hinzufügen jquery", aber als ich die Artikel anderer Leute überprüfte, gab es eine Erklärung, dass "Garn drin" zuerst eingegeben werden sollte, also schrieb ich es als Ergänzung. Lass mich das machen. Für "Garn mit Homebrew installieren" ist der Artikel hier hilfreich.

__ * Beilage 2: __ Es gibt auch eine Möglichkeit, gem'jquery-Rails 'in die Gemfile zu schreiben, aber Rails 6 scheint das Hinzufügen von Garn zu empfehlen. Dieses Mal verwenden wir das Node.js-Paket, um es mit Webpacker zu verwalten.

2. environment.js

`app/config/webpack/environment.js`


//Kopieren Sie diese Beschreibung und fügen Sie sie ein (die ursprüngliche Beschreibung kann gelöscht werden).
//Dies ist die Beschreibung zum Hinzufügen von verwaltetem jQuery in der Webpack-Konfigurationsdatei.
const { environment } = require('@rails/webpacker')
const webpack = require('webpack')

environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    jquery: 'jquery',
  })
)

module.exports = environment

3. application.js

`app/javascript/packs/application.js`


//Kürzung
require("@rails/ujs").start()
require("turbolinks").start()  //Ich kommentiere immer aus
require("@rails/activestorage").start()
require("channels")
require('jquery') //Füge das hinzu
//Kürzung

__ * Hinweis: __turbolinks verwenden den Cache aktiv, sodass Ereignisse, die nach dem Laden der Seite auftreten, möglicherweise nicht funktionieren. Mir ist klar, dass es etwas schwierig ist, Javascript zu verwenden, also kommentieren Sie es aus. (Wenn Sie den Cache verwenden, wird die Ladezeit der Seite verkürzt.)

4. application.html.erb ** Nur für den Fall bestätigt

`html.erb:app/view/layouts/application.html.erb`



<!--Dies passiert, wenn Sie Tourbolinks entfernen-->
<%= stylesheet_link_tag 'application', media: 'all' %>
<%= javascript_pack_tag 'application' %>

Dies ist der Ablauf bis zur Einführung von Jquery.

2) Lösung für $ ist kein definierter Fehler

Wenn $ nicht definiert ist, bedeutet dies, dass jQuery nicht richtig eingefügt wurde. Ich denke, dass dies gelöst werden kann, indem die 4 Schritte überprüft werden, die in der Einführung von jQuery erläutert wurden.

das ist alles.

[RUBY] [Rails 6] Einführung von jQuery ・ Die Lösung des nicht erfassten Referenzfehlers $ ist nicht definiert