Wir erstellen mit Docker eine lokale Entwicklungsumgebung und führen das Rails-Tutorial erneut aus.
--Rails 6 kompatibel mit der neuesten Version des Rails-Tutorials (ab 2020.8.6)
Diese Zeit entspricht dem Teil 5 des Rails-Tutorials
Der Inhalt der Kapitel 3 und 4 spielt keine Rolle,
Kapitel 5 ** 5.1.2 ** Bootstrap und benutzerdefiniertes CSS-Teil stürzen sich schließlich in den Webpack-Sumpf
Installieren und verwalten Sie Bootstrap und Font Awesome mit Yarn und Webpack, ohne Edelsteine zu verwenden.
Außerdem werde ich weitere Tests schreiben, also werde ich diesen Bereich durch RSpec ersetzen und fortfahren.
Der Zweig am Ende von Kapitel 5 füllt das Layout aus https://github.com/dev-naokit/sample_app_on_docker/tree/filling-in-layout
Persönlich entwickelte App
mdClip
Verwenden Sie beim Arbeiten am Docker-Container die entsprechenden Terminalbefehle.
$ docker-compose run app ...
Oder
$ docker-compose exec app ...
Bitte ersetzen Sie durch.
Rails 6 führt Webpack als JavaScript-Modulbündler ein. Für Bilder und CSS wird traditionelles Kettenrad als Asset-Pipeline verwendet. Nur JavaScript wird jetzt mit Webpack kompiliert
application.html.erb
Schreiben Sie den Inhalt von <head> neu
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' %>
#(Fügen Sie die folgende Zeile hinzu.) Lassen Sie das Webpack CSS verarbeiten
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
#Standardmäßig kompiliert und gibt webpacer den Pack-Ordner für JavaScript aus.
<%= 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>
** Wie unter Fehlerbehebung in diesem Artikel und in zukünftigen Artikeln erwähnt, müssen für verschiedene Versionen von Bootstrap CSS-Selektoren und HTML-Klassen neu geschrieben werden. Wenn Sie nicht besonders genau darüber sind, ist es meiner Meinung nach besser, es mit dem ursprünglichen Rails-Tutor abzugleichen **
Geben Sie die Paketversion mit "Garn hinzufügen" an
yarn add [email protected]
Fehlerbehebung in Kapitel 7 Erstellen einer Debug-Umgebung auf einem Container --- Erstellen einer lokalen Entwicklungsumgebung für Rails-Tutorials mit Docker --- Qiita Garn offiziell yarn add | Yarn
jquery und popper sind erforderliche Pakete für Bootstrap
Font Awesome wird später benötigt, also installieren Sie es
('@ Fortawesome' ist kein Tippfehler)
yarn add bootstrap jquery popper.js @fortawesome/fontawesome-free
Installierte Module
Sie können es mit package.json überprüfen
application.js
app/javascript/packs/application.js
Fügen Sie Folgendes hinzu
require("bootstrap");
require("@fortawesome/fontawesome-free");
Es gab Informationen, die auch "require (" jquery ")" enthielten. Bootstrap scheint automatisch "erfordern (" jquery ")", so dass Sie es hier nicht schreiben müssen.
Bei der Überprüfung verschiedener Mängel Ich habe festgestellt, dass jquery ohne "require (" jquery ")" geladen wird Es scheint, dass mehrere Starts von jquery zu einer Fehlfunktion von JavaScript führen können. Die aktuelle Situation wird so weitergehen, wie sie ist
(Ich werde unten einen Referenzartikel veröffentlichen)
environment.js
Machen Sie jQuery von überall aus aufrufbar
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
Auf diese Weise müssen Sie nicht jedes Mal "import $ from" jquery "schreiben.
CSS
app / javascript / stylesheets / application.scss (neu)
Unten hinzugefügt
@import '@fortawesome/fontawesome-free/scss/fontawesome';
@import 'bootstrap/scss/bootstrap';
application.js
app/javascript/packs/application.js
Fügen Sie Folgendes hinzu
import '@fortawesome/fontawesome-free/js/all';
import "../stylesheets/application.scss";
[Schienen 6: Verstehen Sie Webpacker + Garn + Kettenräder vollständig und schreiben Sie JavaScript: Teil 1 (Übersetzung) ｜ TechRacho ~ Engineer's "?" To "!" ~ PS BPS Co., Ltd.](https: // techracho.bpsinc.jp/hachi8833/2020_01_16/85940)
[Die Rails 6+ Webpacker-Entwicklungsumgebung wurde von einem starken JS-Mann eingerichtet (Übersetzung) ｜ TechRacho ~ Engineer's "?" To "!" ~ ｜ BPS Co., Ltd.](https: //techracho.bpsinc) .jp / hachi8833 / 2019_11_28 / 83678)
Es scheint möglich zu sein, nicht nur JavaScript, sondern auch Bilder und CSS mit Webpack zu kompilieren
Derzeit ändert sich nichts an der Situation, in der die Zusammenstellung von Assets durch Sprocket und Webpacker nebeneinander besteht.
Der kompilierte Inhalt von "app / javascript / stylesheets / ..." befindet sich in "
"<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
Ausgabe mit
Der kompilierte Inhalt von "app / assets / stylesheets / ..." befindet sich ebenfalls in "
" <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
Es ist die Situation, an die ausgegeben wird
Mit anderen Worten, selbst wenn Sie CSS und SCSS in "Assets" wie im Tutorial bearbeiten, Selbst wenn Sie CSS und SCSS in "Paketen" bearbeiten, wird die Situation in der Ansicht wiedergegeben.
Bootstrap- und Font Awesome-Stile werden von letzteren importiert und in der Kompilierung und Ansicht wiedergegeben
Ich denke, es spielt keine Rolle, welches Stylesheet Sie bearbeiten, um in Zukunft mit dem Tutorial fortzufahren.
Möglicherweise möchten Sie die Reihenfolge der Anrufe im <head> berücksichtigen
** Übrigens, wenn Sie CSS in "Packs" bearbeiten, können Sie vom Hot-Reload von "Webpack-Dev-Server" profitieren. Insbesondere wenn Sie Ihre Änderungen speichern, wird der Browser automatisch neu geladen und Sie können Ihre Änderungen sofort sehen (mit einiger Verzögerung ...) **
Beim Erstellen von "custom.scss" im Ablauf des Rails-Tutorials
Es ist in Ordnung, wenn Sie Folgendes in app / javascript / packs / application.js schreiben
import "../stylesheets/custom.scss";
(Ich werde mit dieser Spezifikation fortfahren)
Troubleshoot
Wahrscheinlich wird der Bereich um die Kopfzeile nicht gut angezeigt Dies hängt von der Version von Bootstrap ab. Wenn Sie es also wie in diesem Artikel beschrieben installieren Die neueste Version von Bootstrap Version 4.5 (Stand 2020.8.7) wird eingeführt (3.4.1 im Rails-Tutorial)
Das Tag navbar-inverse ist in Bootstrap 4 nicht mehr verfügbar.
<header class="navbar navbar-expand-md bg-dark navbar-dark bg-dark">
Benötigt kleinere Änderungen wie das Ersetzen durch Wir planen, am Ende dieses Kapitels einen modifizierten Zweig zu veröffentlichen.
Es ist auch möglich, Maßnahmen zu ergreifen, beispielsweise die Angabe der Version zum Zeitpunkt der "Garnzugabe".
assert _... um?Kann so wie es ist verwendet werden
Schreiben Sie "include Application Helper" in eine separate "_spec.rb" -Datei
Alternativ schreiben Sie es in spec / rails_helper.rb
Es ist in jeder _spec.rb erforderlich, daher sollten Sie es nicht einzeln schreiben müssen
Dieser Teil war der schwierigste Teil bei der Entwicklung einer persönlichen App in der Rails 6-Umgebung.
Der Inhalt passt möglicherweise nicht zu Ihrer Größe und enthält möglicherweise Fehler.
Wir hoffen, dass es denjenigen hilft, die Apps in der Rails 6-Umgebung entwickeln und die Umgebung für Rails-Tutorials erstellen.