[RUBY] So stellen Sie jQuery in Rails-Apps mit Webpacker bereit

Annahme

Als ich jQuery zum ersten Mal in der Programmierung einführte, sagte ich: "Installiere jQuery mit gem. Die js-Datei wird gelesen, indem" pack-tag "mithilfe der Asset-Pipeline in" inculude-tag "geändert wird." gelernt. Danach wurde von Rails6 aus standardmäßig Webpacker (Juwel, das Webpack einführt) installiert, und ich hörte, dass die Einführung in die Asset-Pipeline nicht üblich ist. Deshalb wollte ich jQuery mit Webpacker einführen.

Umgebung

ruby 2.6.5 rails 6.0.3.2

Einführungsmethode

Installiere die App

Erstellen Sie eine Anwendung und verschieben Sie sie in die Anwendung, die Sie im Terminal erstellt haben. Starten Sie auch den lokalen Server.

Fügen Sie jQuery ein

Geben Sie den folgenden Befehl in das Terminal ein:

`terminal`


$ yarn add jquery

Aufbau

Fügen Sie den Code wie unten gezeigt zum Inhalt der Datei hinzu.

`config/webpack/environment.js`


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

Laden Sie jQuery.

Fügen Sie den folgenden Code hinzu.

`app/javascript/packs/application.js`


require('jquery')

Überprüfen Sie, ob jQuery funktioniert

Erstellen Sie eine test.js-Datei und laden Sie sie.

`app/javascript/packs/application.js`


require('../test')

`app/javascript/test.js`


$(function(){
  alert('jQuery is installed.')
});

Wenn die jQuery erfolgreich geladen wurde, wird "jQuery installiert" angezeigt. Wird in der Warnung angezeigt. Wenn dies fehlschlägt, kann "$" nicht verwendet werden und ein Fehler wird auf der Konsole angezeigt.

Recommended Posts

So stellen Sie jQuery in Rails-Apps mit Webpacker bereit

So installieren Sie jQuery in Rails 6

So ändern Sie den App-Namen in Rails

[Webpacker] Zusammenfassung der Installation von Bootstrap und jQuery in Rails 6.0

Verwendung von JQuery in Rails 6 js.erb

So stellen Sie Bootstrap auf Rails bereit

So installieren Sie Swiper in Rails

So erhalten Sie den Wert von Boolean mit jQuery in einfacher Rails-Form

[rails6.0.0] Speichern von Bildern mit Active Storage im Assistentenformat

[Rails] So laden Sie Bilder mit Carrierwave hoch

So fügen Sie ein Video in Rails ein

Verwendung von MySQL im Rails-Tutorial

Versuchen Sie, die Rails-App für EC2-Teil 2 (Bereitstellung) bereitzustellen.

[Rails] So konfigurieren Sie das Routing in Ressourcen

So implementieren Sie Ranking-Funktionen in Rails

So implementieren Sie die Image-Veröffentlichung mithilfe von Schienen

Verwendung von credentials.yml.enc aus Rails 5.2

Verwenden Sie die Timecop in Rails-Webanwendung, um die Zeit im Browser zu verschieben

So erstellen Sie eine Abfrage mithilfe von Variablen in GraphQL [Verwenden von Ruby on Rails]

[Rails] So wenden Sie das in der Hauptanwendung verwendete CSS mit Administrate an

[Ruby on Rails] So melden Sie sich nur mit Ihrem Namen und Passwort mit dem Gem-Gerät an

[Rails] Verwendung von Auswahlfeldern in Ransack

Wie man Rails allgemein ins Japanische übersetzt

So trennen Sie .scss nach Controller in Rails

[Ruby on Rails] Beim ersten Anmelden ・ So teilen Sie den Bildschirm mit jQuery in zwei Hälften

[Rails] So laden Sie mehrere Bilder mit Carrierwave hoch

So implementieren Sie eine ähnliche Funktion in Rails

So erstellen Sie einfach ein Pulldown mit Rails

[Rails] Verwendung von PostgreSQL in einer Vagrant-Umgebung

So überprüfen Sie Rails-Befehle im Terminal

Wie schreibe ich Rails

So stellen Sie die Anzeigezeit in Rails auf japanische Zeit ein

So implementieren Sie die Gastanmeldung in 5 Minuten im Rails-Portfolio

So implementieren Sie eine nette Funktion in Ajax mit Rails

[Ruby on Rails] Wie schreibe ich eine Enumeration auf Japanisch?

[Ruby On Rails] So setzen Sie die Datenbank in Heroku zurück

[So fügen Sie ein Video mit Rails in haml ein]

So schreiben Sie eine Datumsvergleichssuche in Rails

So konvertieren Sie A in a und a in A mit logischem Produkt und Summe in Java

Abfragen von Arrays in jsonb mit Rails + postgres

[Rails 6] So legen Sie ein Hintergrundbild in Rails [CSS] fest

[Rails] Erstellen Sie eine Sitemap mit sitemap_generator und stellen Sie sie in GAE bereit

[Rails] So laden Sie JavaScript in einer bestimmten Ansicht

[Schienen] So zeigen Sie Bilder in der Ansicht an

So implementieren Sie ein kreisförmiges Profilbild mit CarrierWave und R Magick in Rails

[Rails] So zeigen Sie die Wettervorhersage der registrierten Adresse auf Japanisch mit OpenWeatherMap an