This article uses Webpacker with Rails 6
This is an article that records the procedure for deleting ʻassets pipeline and turbolinks`.
--Confirmation and review of development contents --Memorandum of development procedure ――If it helps other people even a little
I thought, and created this article.
Starting with Rails6, Webpacker is used as the standard module bundler.
Assets at the time of rails new are still alive,
The javascript directory is no longer initially created in Rails 6 during the initial installation on assets.
Also, sprockets gem updates have been delayed and the new JavaScript ES2015
While front-end frameworks such as React and Vue are becoming mainstream
Break away from the dual system of assets and webpacker
I wanted to experience development only with webpacker and ran it.
This time, I am developing with Docker-compose of the article I wrote earlier.
Qiita article for details on environment construction
Manual for building a stable development environment for "Rails6" with "Docker-compose"
Please confirm.
In Rails 6 where Webpacker is standard, it is aggregated under app / javascript without using assets. I want to delete assets.
Delete the app / assets directory
Load bootstrap as a front-end framework with jquery used in Ajax etc. Furthermore, by loading application.scss, js and css are centrally managed by webpacker.
app/javascript/packs/application.js
require("jquery")
require("bootstrap")
import "../stylesheets/application.scss"
Describe the loading of bootstrap in application.scss.
app/javascript/stylesheets/application.scss
@import "~bootstrap/scss/bootstrap";
Now that we no longer use assets, change layouts to stylesheet_pack_tag. Also, since turbo link is not used, it will be changed to the following code.
app/views/layouts/application.html.erb
<%= stylesheet_pack_tag 'application', media: 'all' %>
<%= javascript_pack_tag 'application' %>
In Rails 6, it seems that it can not be completely deleted unless it is deleted with both yarn and gem.
Delete with yarn
yarn remove turbolinks
Delete with Gemfile
gem 'turbolinks', '~> 5'
bundle install
Furthermore, delete "turbolinks" from app / javascript / packs / application.js.
In order to use $ in jQuery with Ajax, write the following.
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
Since I am using docker, I get an error on localhost. We will correct and respond to the following three locations.
config/webpacker.yml
check_yarn_integrity: false
host: 0.0.0.0
public: 0.0.0.0:3035
Add a port for the correction made in 8.
- "3035:3035"
It seems that assets cannot be completely deleted without lowering the version of sprockets in Gemfile. https://github.com/rails/sprockets/issues/643
Modify gemfile
gem 'sprockets', '~> 3.7.2'
bundle update sprockets
foreman is a tool that can read Procfiles and manage multiple processes. Describe the process managed by the application in Procfile It corresponds by placing it in the application root. Reference URL: foreman
gem 'foreman'
Procfile.dev
web: bundle exec rails s -b 0.0.0.0 -p 3000
webpacker: bin/webpack-dev-server
Bundle install.
bundle install
The bash file has also been modified to match foreman.
qs.bash
rails_server() {
compose_stop $app
rm_pids
$dc run $rm --service-ports $app bundle exec foreman start -f Procfile.dev
}
The above should complete the removal of ʻassets turbolinks`.
If possible, Ajax also wanted to break away from JQuery, Due to lack of learning, replacement has not been completed yet. Once you have completed your studies, you can say that you have finally moved to ES2015.
Because it is a beginner, there may be work contents and mistakes. We would appreciate it if you could let us know if you have any notices.
Recommended Posts