[RUBY] So installieren Sie jQuery in Rails 6

Einführung

Was du machen willst

• Ich möchte die Ajax-Unterstützung für die ähnliche Funktion implementieren ――Ich möchte dafür jQuery einführen

Betriebsumgebung

ruby 2.6.5 / Rails 6.0.3.4

Versuch es

Die Implementierung mit Webpacker, der Standardausrüstung von Rails6, war einfach. Viele Artikel haben einen Umweg mit Informationen bis zu Rails 5 gemacht. Wenn Sie also 6 Jahre oder später sind, verschwenden Sie bitte keine Zeit wie ich ...

Referenz-URL

Rails Guide> Verwenden von JavaScript mit Rails

Verfahren

--Installation von jQuery --Webpack-Einstellungen --application.js Einstellungen

• Betriebsprüfung

jQuery-Installation

Was ist jQuery überhaupt?

Eine der Bibliotheken, um JavaScript einfacher zu schreiben.

Wenn Sie jQuery (Bibliothek) verwenden möchten, müssen Sie es daher in JavaScript (ursprüngliche Programmiersprache) kompilieren (übersetzen). Es gibt viele Möglichkeiten zum Kompilieren, aber da ich ein Anfänger bin, verwenden wir jetzt den einfachen Webpacker! Das ist der Zweck dieses Artikels.

Installieren Sie zunächst jQuery.

Terminal

% yarn add jquery

Es scheint, dass die Grundlinie darin besteht, ein Juwel namens jquery-rails in der Installationsmethode vor Rails 5 zu installieren. Wenn Sie es jedoch mit Webpacker verwalten, installieren Sie es mit dem Befehl yarn.

*** Ich habe Gem von Gemfile installiert und es mit Bezug auf diesen Artikel gelöscht *** > Entfernen Sie das mit Gemfile installierte Gem

Was ist Garn?

JavaScript-Paketmanager. Verwalten Sie Pakete, die auf Node.js ausgeführt werden.

Was ist Node.js.

Eine "Umgebung" für die Verwendung von JavaScript, das ursprünglich eine Sprache für die Front-Side-Entwicklung ist, auf der Serverseite. Dank Node.js können Sie Ajax problemlos unterstützen.

Mit anderen Worten, Sie haben die Sprache jQuery in einem Übersetzer namens Webpacker mit den Anweisungen für den Server namens Garn registriert (es tut mir leid, wenn es anders ist).

Webpack-Einstellungen

Autorisieren Sie jQuery wie in der Webpack-Konfigurationsdatei verwaltet.

config/webpack/environment.js

const { environment } = require('@rails/webpacker')
//Unten hinzugefügt
const webpack = require('webpack')
environment.plugins.prepend('Provide',
    new webpack.ProvidePlugin({
        $: 'jquery/src/jquery',
        jQuery: 'jquery/src/jquery'
    })
)
//Bisher
module.exports = environment

application.js Einstellungen

Ermöglicht application.js, jQuery aufzurufen.

javascript/packs/application.js

//Unterlassung

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
//Nachtrag
require('jquery')

//Unterlassung

Damit ist die Installation abgeschlossen.

Funktionsprüfung

Überprüfen Sie, ob jQuery einwandfrei funktioniert. Veröffentlichen Sie den folgenden Code auf Ihrer Lieblingsseite.

:Lieblingsseite.html.erb

<p>Prüfung</p>
<script type="text/javascript">
  $(document).ready(function() {
    $("p").text("Erfolg! !!");
  });
</script>

"Erfolg !!" wird dem Text des p-Elements zugewiesen.

(Erfolgsbeispiel) Wenn "Erfolg !!" anstelle von "Test" wie folgt angezeigt wird, ist die Funktionsprüfung abgeschlossen.

abschließend

Ich recherchierte in verschiedenen Artikeln und stellte Edelsteine vor, aber die Implementierung mit Webpacker war einfach.

Besonders dieses Mal finde ich es gut, dass ich Node.js auch nur oberflächlich verstehen konnte, während ich JavaScript und jQuery untersuchte.

Artikel, die ich als Referenz verwendet habe Ingenieur Eingang> Für Anfänger! Was ist Node.js in 3 Minuten?

*** Ich schreibe einen Artikel für Anfänger von Ruby / Rails. *** *** *** Ich möchte den Artikel in Zukunft 3-4 Artikel pro Woche aktualisieren, also folgen Sie uns bitte, wenn Sie ein Anfänger sind! !! *** ***

Bis zum Ende Danke fürs Lesen!

✔︎