Cet article utilise Webpacker avec Rails 6 Il s'agit d'un article qui enregistre la procédure de suppression du «pipeline d'actifs» et des «turbolinks».
--Confirmation et révision des contenus de développement --Mémorandum de procédure de développement ――Si cela aide les autres même un peu
J'ai pensé et créé cet article.
À partir de Rails6, Webpacker est utilisé comme bundler de module standard.
Les actifs des rails neufs sont toujours vivants,
Lors de l'installation initiale sur les actifs, le répertoire javascript n'est plus initialement créé dans Rails 6.
De plus, les mises à jour des gemmes de pignons stagnent et le nouveau JavaScript ES2015
Alors que les frameworks frontaux tels que React et Vue deviennent courants
Éloignez-vous du double système d'actifs et de Webpacker
Je voulais expérimenter le développement uniquement avec Webpacker et je l'ai exécuté.
Cette fois, je développe avec Docker-compose l'article que j'ai écrit plus tôt.
L'article de Qiita pour plus de détails sur la construction de l'environnement
Manuel de création d'un environnement de développement stable pour «Rails6» avec «Docker-compose»
Veuillez confirmer.
Dans Rails 6 où Webpacker est devenu la norme, il est agrégé sous app / javascript sans utiliser d'actifs. Je souhaite supprimer des éléments.
Supprimer le répertoire app / assets
Chargez bootstrap en tant que framework frontal avec jquery utilisé dans Ajax, etc. De plus, en chargeant application.scss, js et css sont gérés de manière centralisée par webpacker.
app/javascript/packs/application.js
require("jquery")
require("bootstrap")
import "../stylesheets/application.scss"
Décrivez le chargement de bootstrap dans application.scss.
app/javascript/stylesheets/application.scss
@import "~bootstrap/scss/bootstrap";
Maintenant que nous n'utilisons plus d'actifs, changez les mises en page en stylesheet_pack_tag. De plus, comme Turbo Link n'est pas utilisé, il sera remplacé par le code suivant.
app/views/layouts/application.html.erb
<%= stylesheet_pack_tag 'application', media: 'all' %>
<%= javascript_pack_tag 'application' %>
Dans Rails 6, il semble qu'il ne puisse pas être complètement supprimé à moins qu'il ne soit supprimé à la fois avec du fil et des gemmes.
Supprimer avec yarn
yarn remove turbolinks
Supprimer avec Gemfile
gem 'turbolinks', '~> 5'
bundle install
De plus, supprimez "turbolinks" de app / javascript / packs / application.js.
Pour utiliser $ dans jQuery en Ajax, écrivez ce qui suit.
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
Puisque j'utilise docker, j'obtiens une erreur s'il s'agit de localhost. Nous corrigerons et répondrons aux trois emplacements suivants.
config/webpacker.yml
check_yarn_integrity: false
host: 0.0.0.0
public: 0.0.0.0:3035
Ajoutez un port pour la correction effectuée en 8.
- "3035:3035"
Il semble que les actifs ne peuvent pas être complètement supprimés sans abaisser la version des pignons dans le Gemfile. https://github.com/rails/sprockets/issues/643
Modifier le gemfile
gem 'sprockets', '~> 3.7.2'
bundle update sprockets
foreman est un outil capable de lire Procfiles et de gérer plusieurs processus. Décrire le processus géré par l'application dans Procfile Cela correspond en le plaçant dans la racine de l'application. URL de référence: foreman
gem 'foreman'
Procfile.dev
web: bundle exec rails s -b 0.0.0.0 -p 3000
webpacker: bin/webpack-dev-server
Installation groupée.
bundle install
Le fichier bash a également été modifié pour correspondre au contremaître.
qs.bash
rails_server() {
compose_stop $app
rm_pids
$dc run $rm --service-ports $app bundle exec foreman start -f Procfile.dev
}
La suppression des «actifs» «turbolinks» doit être effectuée ci-dessus.
Si possible, Ajax voulait également rompre avec JQuery, Il n'a pas encore été remplacé en raison d'un manque d'apprentissage. Si vous terminez l'étude, vous pouvez dire que vous êtes enfin passé à ES2015.
Parce que c'est un débutant, il peut y avoir des contenus de travail et des erreurs. Nous vous serions reconnaissants de bien vouloir nous faire savoir si vous avez des avis.
Recommended Posts