Nous créons un environnement de développement local avec Docker et réexécutons le didacticiel Rails.
--Rails 6 compatible avec la dernière version du tutoriel Rails (à partir de 2020.8.6)
Cette fois, c'est la partie correspondant au chapitre 5 du tutoriel Rails
Le contenu des chapitres 3 et 4 n'a pas d'importance,
Chapitre 5 ** 5.1.2 ** Bootstrap et la partie CSS personnalisée se précipitent enfin dans le marais Webpack
Plus précisément, installez et gérez Bootstrap et Font Awesome avec Yarn et Webpack sans utiliser de gemmes.
De plus, j'écrirai plus de tests, donc je remplacerai cette zone par RSpec et continuerai.
La branche à la fin du chapitre 5 est la mise en page de remplissage https://github.com/dev-naokit/sample_app_on_docker/tree/filling-in-layout
Application développée personnellement mdClip <éditeur de démarques en ligne>
Lorsque vous utilisez le conteneur Docker, utilisez les commandes du terminal comme il convient.
$ docker-compose run app ...
Ou
$ docker-compose exec app ...
Veuillez remplacer par.
Rails 6 présente Webpack en tant que bundler de modules JavaScript, Pour les images et CSS, Sprocket traditionnel est utilisé comme pipeline d'actifs, Seul JavaScript est désormais compilé avec Webpack
application.html.erb
Réécrire le contenu de <head>
app/views/layouts/application.html.erb
<head>
<title><%= full_title(yield(:title)) %></title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
#(Ajoutez la ligne ci-dessous) Autoriser webpack à gérer CSS
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
#Par défaut, webpacer compile et génère le dossier du pack pour JavaScript.
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js">
</script>
<![endif]-->
</head>
** Comme mentionné dans Dépannage dans cet article et dans les prochains articles, différentes versions de Bootstrap nécessiteront la réécriture des sélecteurs CSS et des classes HTML. Si vous n'êtes pas très particulier à ce sujet, je pense qu'il vaut mieux le faire correspondre avec le tuteur Rails original **
Spécifiez la version du package avec yarn add
yarn add [email protected]
Dépanner au chapitre 7 Création d'un environnement de débogage sur un conteneur --- Création d'un environnement de développement local pour les didacticiels Rails avec Docker --- Qiita Officiel de fil yarn add | Yarn
jquery et popper sont des packages requis pour Bootstrap
Font Awesome sera nécessaire plus tard, alors installez-le
('@ Fortawesome' n'est pas une faute de frappe)
yarn add bootstrap jquery popper.js @fortawesome/fontawesome-free
Modules installés
Vous pouvez le vérifier avec package.json
application.js
app/javascript/packs/application.js
Ajoutez ce qui suit
require("bootstrap");
require("@fortawesome/fontawesome-free");
Il y avait des informations qui incluaient également require ('jquery'),
Bootstrap semble automatiquement require ('jquery'), vous n'avez donc pas besoin de l'écrire ici.
En cours de vérification de divers défauts
J'ai remarqué que jquery est chargé sans require ('jquery')
Il semble que plusieurs lancements de jquery puissent entraîner un dysfonctionnement de JavaScript.
La situation actuelle se déroulera telle quelle
(Je publierai un article de référence ci-dessous)
environment.js
Rendre jQuery appelable de n'importe où
config/webpack/environment.js
const { environment } = require('@rails/webpacker')
var webpack = require('webpack');
environment.plugins.append(
'Provide',
new webpack.ProvidePlugin({
$: 'jquery/src/jquery',
jQuery: 'jquery/src/jquery',
Popper: ['popper.js', 'default']
})
)
module.exports = environment
En faisant cela, vous n'avez pas besoin d'écrire ʻimport $ from'jquery '; `à chaque fois.
CSS
ʻApp / javascript / stylesheets / application.scss` (nouveau)
Ajouté ci-dessous
@import '@fortawesome/fontawesome-free/scss/fontawesome';
@import 'bootstrap/scss/bootstrap';
application.js
app/javascript/packs/application.js
Ajoutez ce qui suit
import '@fortawesome/fontawesome-free/js/all';
import "../stylesheets/application.scss";
[Rails 6: Comprenez parfaitement Webpacker + Yarn + Sprockets et écrivez JavaScript: Partie 1 (traduction) ｜ TechRacho ~ Engineer's "?" To "!" ~ ｜ BPS Co., Ltd.](https: // techracho.bpsinc.jp/hachi8833/2020_01_16/85940)
[L'environnement de développement Rails 6+ Webpacker a été mis en place par un homme fort de JS (traduction) ｜ TechRacho ~ Engineer's "?" To "!" ~ ｜ BPS Co., Ltd.](https: //techracho.bpsinc) .jp / hachi8833 / 2019_11_28 / 83678)
Il semble qu'il soit possible de compiler non seulement JavaScript mais aussi des images et CSS, le tout avec Webpack
Actuellement, il n'y a pas de changement dans la situation où la compilation d'actifs par Sprocket et Webpacker coexistent.
ʻApp / javascript / stylesheets / ... est compilé et le contenu est dans
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
Sortie avec
ʻApp / assets / stylesheets / ... est compilé et le contenu est également dans
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
C'est la situation qui est sortie
En d'autres termes, même si vous éditez le CSS et le SCSS dans ʻassetscomme dans le tutoriel, Même si vous modifiez le CSS et le SCSS dans lespacks`, la situation sera reflétée dans la vue.
Les styles Bootstrap et Font Awesome sont importés par ce dernier et reflétés dans la compilation et la vue
Je pense que la feuille de style que vous éditez n'a pas d'importance pour continuer avec le tutoriel à l'avenir. Vous voudrez peut-être garder à l'esprit l'ordre des appels dans le
** Au fait, si vous modifiez le CSS dans les packs, vous pouvez bénéficier du rechargement à chaud de webpack-dev-server
Plus précisément, si vous enregistrez vos modifications, le navigateur se rechargera automatiquement et vous pourrez voir vos modifications immédiatement (avec un certain délai ...) **
Lors de la création de custom.scss dans le déroulement du didacticiel Rails
Ce n'est pas grave si vous écrivez ce qui suit dans app / javascript / packs / application.js
import "../stylesheets/custom.scss";
(Je vais continuer avec cette spécification)
Troubleshoot
La zone autour de l'en-tête ne s'affiche probablement pas correctement Cela dépend de la version de Bootstrap, donc si vous l'installez comme décrit dans cet article La dernière version de Bootstrap ver.4.5 (à partir de 2020.8.7) sera introduite (3.4.1 dans le didacticiel Rails)
La balise navbar-inverse n'est plus disponible dans Bootstrap 4.
<header class="navbar navbar-expand-md bg-dark navbar-dark bg-dark">
Nécessite des modifications mineures telles que le remplacement par Nous prévoyons de publier une branche modifiée à la fin de ce chapitre.
Il est également possible de prendre des mesures telles que la spécification de la version au moment de "yarn add".
Peut être utilisé tel quel
ʻInclure Application Helper dans un fichier _spec.rb` séparé
Sinon, écrivez-le dans spec / rails_helper.rb
Il est requis dans chaque _spec.rb, vous ne devriez donc pas avoir besoin de l'écrire individuellement
Cette partie a été la partie la plus difficile du développement d'une application personnelle dans l'environnement Rails 6.
Le contenu peut ne pas correspondre à votre taille et contenir des erreurs,
Nous espérons que cela aidera ceux qui développent des applications dans l'environnement Rails 6 ainsi que la création de l'environnement pour les didacticiels Rails.
Recommended Posts