[RUBY] Comment installer jQuery dans Rails 6

introduction

Chose que tu veux faire

--Je veux implémenter le support Ajax pour la fonction similaire ――Je veux introduire jQuery pour ça

Environnement d'exploitation

ruby 2.6.5 / Rails 6.0.3.4

Essayez-le

Il a été facile à mettre en œuvre en utilisant Webpacker qui est un équipement standard de Rails6. De nombreux articles ont fait un détour avec des informations jusqu'à Rails 5, donc si vous avez 6 ans ou plus, ne perdez pas de temps comme moi ...

URL de référence

Guide des rails> Utilisation de JavaScript avec des rails

procédure

--Installation de jQuery --Paramètres du Webpack Paramètres --application.js

• Contrôle de fonctionnement

Installation de jQuery

Qu'est-ce que jQuery en premier lieu?

Une des bibliothèques pour écrire plus facilement du JavaScript.

Par conséquent, si vous souhaitez utiliser jQuery (bibliothèque), vous devez le compiler (traduire) en JavaScript (langage de programmation d'origine). Il existe de nombreuses façons de compiler, mais comme je suis débutant, utilisons le simple Webpacker pour le moment! C'est le but de cet article.

Tout d'abord, installez jQuery.

Terminal

% yarn add jquery

Il semble que la ligne de base consiste à installer un gem appelé jquery-rails dans la méthode d'installation avant Rails 5, mais lors de la gestion avec Webpacker, installez-le en utilisant la commande yarn.

*** J'ai installé Gem à partir de Gemfile, donc je l'ai supprimé en faisant référence à cet article *** > Supprimer le Gem installé avec Gemfile

Qu'est-ce que le fil

Gestionnaire de packages JavaScript. Gérez les packages qui s'exécutent sur Node.js.

Qu'est-ce que Node.js

Un "environnement" d'utilisation de JavaScript, qui est à l'origine un langage de développement frontal, côté serveur. Grâce à Node.js, vous pouvez facilement prendre en charge Ajax.

En d'autres termes, vous avez l'impression d'avoir enregistré le langage jQuery dans un traducteur appelé Webpacker avec les instructions pour le serveur appelé yarn (je suis désolé si c'est différent).

Paramètres Webpack

Autorisez jQuery comme géré dans le fichier de configuration Webpack.

config/webpack/environment.js

const { environment } = require('@rails/webpacker')
//Ajouté ci-dessous
const webpack = require('webpack')
environment.plugins.prepend('Provide',
    new webpack.ProvidePlugin({
        $: 'jquery/src/jquery',
        jQuery: 'jquery/src/jquery'
    })
)
//Jusque là
module.exports = environment

paramètres application.js

Permet à application.js d'appeler jQuery.

javascript/packs/application.js

//Omission

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

//Omission

Ceci termine l'installation.

Contrôle de fonctionnement

Vérifiez si jQuery fonctionne correctement. Publiez le code suivant sur votre page préférée.

:Page préférée.html.erb

<p>tester</p>
<script type="text/javascript">
  $(document).ready(function() {
    $("p").text("Succès! !!");
  });
</script>

"Success !!" est affecté au texte de l'élément p.

(Exemple de réussite) Si "Success !!" s'affiche au lieu de "Test" comme ceci, le contrôle de l'opération est terminé.

en conclusion

J'ai recherché divers articles et présenté des gemmes, mais c'était facile à mettre en œuvre avec Webpacker.

Surtout cette fois, je pense que c'était bien de pouvoir comprendre Node.js même superficiellement tout en étudiant JavaScript et jQuery.

Articles que j'ai utilisés comme référence Entrée ingénieur> Pour les débutants! Qu'est-ce que Node.js en 3 minutes?

*** J'écris un article pour les débutants de Ruby / Rails. *** *** *** Je voudrais mettre à jour 3-4 articles par semaine à l'avenir, donc si vous êtes un débutant, suivez-moi! !! *** ***

Jusqu'à la fin Merci d'avoir lu!

✔︎