Dieser Artikel verwendet Webpacker mit Rails 6 In diesem Artikel wird das Verfahren zum Löschen von "Assets Pipeline" und "Turbolinks" aufgezeichnet.
Ich dachte und erstellte diesen Artikel.
Ab Rails6 wird "Webpacker" als Standardmodul-Bundler verwendet. Das Vermögen zum Zeitpunkt der Schienen neu ist noch am Leben, Während der Erstinstallation auf Assets wird das Javascript-Verzeichnis zunächst nicht mehr in Rails 6 erstellt. Außerdem stagnieren Kettenrad-Edelstein-Updates und das neue JavaScript ES2015 Während Front-End-Frameworks wie React und Vue zum Mainstream werden Brechen Sie vom dualen System aus Assets und Webpacker ab Ich wollte die Entwicklung nur mit Webpacker erleben und habe sie ausgeführt.
Dieses Mal entwickle ich mit Docker-Compose den Artikel, den ich zuvor geschrieben habe.
Qiitas Artikel für Details zum Umweltbau
Handbuch zum Erstellen einer stabilen Entwicklungsumgebung für "Rails6" mit "Docker-compose"
Bitte bestätigen.
In Rails 6, wo Webpacker zum Standard wurde, wird es unter App / Javascript ohne Verwendung von Assets zusammengefasst. Ich möchte Assets löschen.
Löschen Sie das Verzeichnis app / assets
Laden Sie Bootstrap als Front-End-Framework mit jquery, das in Ajax usw. verwendet wird. Durch das Laden von application.scss werden js und css außerdem zentral vom Webpacker verwaltet.
app/javascript/packs/application.js
require("jquery")
require("bootstrap")
import "../stylesheets/application.scss"
Beschreiben des Ladens von Bootstrap in application.scss.
app/javascript/stylesheets/application.scss
@import "~bootstrap/scss/bootstrap";
Nachdem wir keine Assets mehr verwenden, ändern Sie die Layouts in stylesheet_pack_tag. Da Turbo Link nicht verwendet wird, wird es in den folgenden Code geändert.
app/views/layouts/application.html.erb
<%= stylesheet_pack_tag 'application', media: 'all' %>
<%= javascript_pack_tag 'application' %>
In Rails 6 scheint es, dass es nicht vollständig gelöscht werden kann, es sei denn, es wird sowohl mit Garn als auch mit Edelstein gelöscht.
Mit "Garn" löschen
yarn remove turbolinks
Löschen Sie mit Gemfile
gem 'turbolinks', '~> 5'
bundle install
Löschen Sie außerdem "turbolinks" aus app / javascript / packs / application.js.
Schreiben Sie Folgendes, um $ in jQuery in Ajax zu verwenden.
config/webpack/environment.js
const { environment } = require('@rails/webpacker')
const webpack = require('webpack')
environment.plugins.prepend('Provide',
new webpack.ProvidePlugin({
$: 'jquery/src/jquery',
jQuery: 'jquery/src/jquery'
})
)
module.exports = environment
Da ich Docker verwende, wird eine Fehlermeldung angezeigt, wenn es sich um localhost handelt. Wir werden die folgenden drei Stellen korrigieren und darauf reagieren.
config/webpacker.yml
check_yarn_integrity: false
host: 0.0.0.0
public: 0.0.0.0:3035
Fügen Sie einen Port für die in 8 vorgenommene Korrektur hinzu.
- "3035:3035"
Es scheint, dass Assets nicht vollständig gelöscht werden können, ohne die Version der Kettenräder in Gemfile zu verringern. https://github.com/rails/sprockets/issues/643
Gemfile ändern
gem 'sprockets', '~> 3.7.2'
bundle update sprockets
Foreman ist ein Tool, das Procfiles lesen und mehrere Prozesse verwalten kann. Beschreiben des von der Anwendung in Procfile verwalteten Prozesses Dies entspricht der Platzierung im Anwendungsstamm. Referenz-URL: Vorarbeiter
gem 'foreman'
Procfile.dev
web: bundle exec rails s -b 0.0.0.0 -p 3000
webpacker: bin/webpack-dev-server
Bundle installieren.
bundle install
Die Bash-Datei wurde ebenfalls so geändert, dass sie dem Vorarbeiter entspricht.
qs.bash
rails_server() {
compose_stop $app
rm_pids
$dc run $rm --service-ports $app bundle exec foreman start -f Procfile.dev
}
Das Entfernen von "Vermögenswerten" "Turbolinks" sollte oben abgeschlossen sein.
Wenn möglich, wollte Ajax auch von JQuery abbrechen, Es wurde aufgrund mangelnden Lernens noch nicht ersetzt. Wenn Sie die Studie abgeschlossen haben, können Sie sagen, dass Sie endlich zu ES2015 gewechselt sind.
Da es sich um einen Anfänger handelt, kann es zu Arbeitsinhalten und Fehlern kommen. Wir würden uns freuen, wenn Sie uns mitteilen könnten, wenn Sie irgendwelche Hinweise haben.
Recommended Posts