PC & Mobile

Ruby on Rails 6 avec Webpacker et Bootstrap – Guide étape par étape

Ruby on Rails 6 avec Webpacker et Bootstrap - Guide étape par étape


GUIDE ÉTAPE PAR ÉTAPE

Guide pas à pas complet sur la configuration de Bootstrap à l'aide de Webpacker dans Rails 6

C’est essentiellement un joyau qui nous permet d’utiliser facilement les applications Webpack in Rails.

Alors, que fait Webpack? En termes simples, il prend tous vos actifs (JavaScripts, css, images, fichiers de polices, etc.) et les regroupe pour en faire un fichier géant que vous pouvez inclure dans votre application Rails. En interne, cela crée un graphique de dépendance ce qui l’aide à naviguer dans toutes vos dépendances d’actifs afin de générer le fichier fourni. Comme n'importe quoi d'autre, vous pouvez configurer webpack via webpacker pour générer plusieurs bundles. J'expliquerai plus tard comment et pourquoi vous voudriez le faire.

Pour info, j'utiliserai webpack et webpacker interchangeables dans cet article, sauf indication contraire.

TLDR: Si vous prévoyez d’écrire des composants de réaction, utilisez Webpacker. Si vous avez seulement besoin de saupoudrer du Javascript, utilisez simplement le pipeline d’actifs standard via Sprockets.

La première question qui m'est venue à l'esprit lorsque j'ai lancé une nouvelle application Rails 6. Les pignons et le Webpacker sont fournis par défaut. Alors, que dois-je utiliser pour gérer mes actifs? Devrais-je utiliser les deux?

Il existe différentes réponses à cette question en fonction de votre cas d'utilisation. Réponse courte: si tous vos actifs sont déjà gérés via le pipeline d'actifs via des pignons, conservez-les là. Vous n’avez aucune raison de les transférer dans Webpack si vous ne construisez pas un «JavaScript app-like». Le fichier README sur le référentiel webpacker officiel l'explique assez bien:

... Il coexiste avec le portefeuille d'actifs, comme Le but principal de WebPack est JavaScript comme une application., pas des images, CSS, ou même JavaScript Sprinkles (que tout continue à vivre dans app / assets).Cependant, il est possible d'utiliser Webpacker pour les ressources CSS, les images et les polices, auquel cas vous n'avez peut-être même pas besoin du pipeline de ressources. Ceci est principalement pertinent lorsque vous utilisez exclusivement des frameworks JavaScript basés sur des composants.

Commençons par créer une nouvelle application Rails 6. J'utilise la version 6.0.0.rc1 sur Ruby 2.6.2 à compter de cette publication:

rails nouveau helloworld

Par défaut, il doit générer votre application Rails fournie avec le pipeline d’actifs standard et la gem Webpacker.

Les fichiers de pipeline d’actifs sont stockés sous le app / actifs dossier pendant que les fichiers webpack sont gérés sous le app / javascript / packs dossier. Vous remarquerez également que le fichier de mise en forme par défaut de l’application contient une référence à la application.css déposer en utilisant le stylesheet_link_tag (pipeline d’actifs) et le application.js déposer en utilisant le javascript_pack_tag (Webpacker) comme suit:

Pour nous assurer que Webpack fonctionne ultérieurement, créons une page d'accueil simple que nous pourrons utiliser pour illustrer notre configuration. Je vais aller de l'avant et vider tous les exemples de contrôleur, de vue et de routage ci-dessous dans un seul résumé. Je le ferai également tout au long de l'article:

Démarrez le serveur rails et votre navigateur devrait afficher les informations suivantes lors de votre visite à http: // localhost: 3000

Une simple page de bonjour le monde

Ensuite, installons Bootstrap en tant que notre infrastructure frontale. Nous pouvons l'installer via le pipeline d'actifs ou le Webpack. Permet d'utiliser webpack dans ce cas. Exécutez le suivant fil commande pour installer Bootstrap avec 2 autres bibliothèques dont dépend Bootstrap:

fil ajouter bootstrap jquery popper.js

Une fois installé, vous devriez vérifier le app / package.json fichier pour voir que les bonnes versions ont été installées avec succès. le package.json le fichier est similaire au gemfile.lock fichier en ce qu'il aide l'application à garder une trace de tous les plugins installés. Voici un exemple:

Ensuite, nous voulons nous assurer que nos javascripts comprennent les $, Jquery et Popper alias. Pour ce faire, nous utiliserons le plug-in Provide dans Webpack pour charger automatiquement les bibliothèques / modules respectifs et les mapper sur les alias via le app / config / webpack / environment.js déposer comme suit:

Continuons et importons Bootstrap dans notre fichier JavaScript webpack principal sous app / javascript / packs / application.js . Nous allons également lancer la fonction info-bulle pour démontrer que le bootstrap fonctionne correctement:

Lancez votre application rails sur localhost. Vous devriez maintenant survoler le bouton et voir une infobulle apparaître au-dessus du bouton sans style. Permet d'importer les styles Bootstrap ensuite.

Il est important de noter que pour que vos feuilles de style fonctionnent via webpack, vous devez les importer dans le fichier JavaScript de votre webpack. C’est comme ça que Webpack fonctionne.

Permet de créer un nouveau sous-dossier appelé feuilles de style sous app / javascript . À l'intérieur, nous allons créer la principale application.scss fichier pour stocker nos importations de bibliothèque css avec un _custom.scss fichier pour stocker nos styles personnalisés. Vous pouvez inclure tous vos css personnalisés dans le même application.scss fichier, bien sûr, je voulais juste vous montrer un exemple de la manière dont vous pouvez organiser les styles personnalisés dans des fichiers distincts si vous le souhaitez.

Redémarrez votre serveur de rails et le tour est joué! Vous avez une application Rails opérationnelle avec Bootstrap à l'aide de Webpack.

Page du monde de salut simple avec le fonctionnement de Boostrap

Pourquoi voudrais-je faire cela? Plusieurs raisons, dont l'une est “J'aime que mes fichiers CSS, images et polices soient séparés de mes javascripts”

Pour ce faire, nous devrons mettre à jour config / webpacker.yml pour pouvoir résoudre les actifs stockés dans le app / actifs dossier.

chemins_résolu: ['app/assets']

Créer un home.css déposer sous le app / assets / stylesheets dossier et importer que dans notre webpack principal application.scss :

Redémarrez votre application et rechargez la page d'accueil. Vous devriez maintenant voir un titre «Hello World» vert depuis le home.css La feuille de style importée en dernier remplace la couleur rouge définie dans le _custom.scss feuille de style. Sucré.

Page du monde simple salut avec titre vert
Show More

SupportIvy

SupportIvy.com : Un lieu pour partager le savoir et mieux comprendre le monde. Meilleure plate-forme de support gratuit pour vous, Documentation &Tutoriels par les experts.

Related Articles

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Close
Close