1262 文字
6 分
webpackerを削除してcssbundling-rails+jsbundling-rails+propshaftに移行
2022-10-09
Ruby on Rails
importmap
/
Ruby on Rails

概要#

importmap-railsに移行したかったのですが、手元のブラウザではちゃんと動かなかったので諦めてJavascriptはtranspileすることにしました。

webpackerから移行した際の手順をまとめておきます。

https://postcode.teraren.com/ こちらのサービスで実施した内容になります。

移行手順#

できるだけわかりやすいように、差分を多く掲載します。

Gemfileを書き換えます。

diff --git a/Gemfile b/Gemfile
index 312e40b..4c2a986 100644
--- a/Gemfile
+++ b/Gemfile
@@ -1,13 +1,31 @@
 source 'https://rubygems.org'


 gem "rails", '~>7.0'
-gem 'webpacker'


 gem 'jbuilder'


 gem 'puma'


+# gem "sprockets-rails"
+
+#gem "importmap-rails"
+gem 'cssbundling-rails'
+gem 'propshaft'
+
+gem "jsbundling-rails"
+
+#gem "turbo-rails"
+
+#gem "stimulus-rails"
+
+

package.jsonを一新します。

  • ついでにjQueryに依存したコードも削除下のでjqueryも消しています。
  • bootstrapのバージョンも最新にしています。
  • webpack関連のnpmは削除しています。
diff --git a/package.json b/package.json
index 5ec1857..18b62d6 100644
--- a/package.json
+++ b/package.json
@@ -1,18 +1,19 @@
 {
-  "packageManager": "yarn@1.22.15",
-  "private": true,
+  "name": "app",
+  "private": "true",
   "dependencies": {
-    "@fortawesome/fontawesome-free": "^5",
-    "@popperjs/core": "^2",
-    "@rails/activestorage": "^7.0",
-    "@rails/ujs": "^7.0",
-    "@rails/webpacker": "5.4",
-    "bootstrap": "^5.1",
-    "bootswatch": "^5.1",
-    "jquery": "^3.6",
-    "webpack-cli": "^4"
+    "@fortawesome/fontawesome-free": "^6.2.0",
+    "@popperjs/core": "^2.11.6",
+    "@rails/ujs": "^7.0.4",
+    "bootstrap": "^5.2.2",
+    "bootswatch": "^5.2.1"
+  },
+  "scripts": {
+    "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=assets",
+    "build:css": "sass ./app/assets/stylesheets/application.sass.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules"
   },
   "devDependencies": {
-    "webpack-dev-server": "^4"
+    "esbuild": "^0.15.10",
+    "sass": "^1.55.0"
   }
 }

設定ファイルを自動作成します。

Terminal window
./bin/rails css:install:sass
./bin/rails javascript:install:esbuild

JS周りの設定ファイルを書き換えます。

diff --git a/app/assets/builds/.keep b/app/assets/builds/.keep
new file mode 100644
index 0000000..e69de29
diff --git a/app/assets/config/manifest.js b/app/assets/config/manifest.js
index 20b4c66..cf7a2a5 100644
--- a/app/assets/config/manifest.js
+++ b/app/assets/config/manifest.js
@@ -1,3 +1,11 @@
//= link graphiql/rails/application.css
//= link graphiql/rails/application.js
// app/assets/config/manifest.js


//= link_tree ../images


//= link application.js
//= link controllers/application.js
//= link controllers/home.js
//= link controllers/index.js


//= link application.css
//= link_tree ../builds

CSS周りの設定ファイルを書き換えます。gitにファイルの置き場所が変わっているので新規作成として認識されてます。

diff --git a/app/assets/stylesheets/application.sass.scss b/app/assets/stylesheets/application.sass.scss
new file mode 100644
index 0000000..7f0faab
--- /dev/null
+++ b/app/assets/stylesheets/application.sass.scss
@@ -0,0 +1,8 @@
+// bootswatch
+@import "bootswatch/dist/simplex/variables";
+@import "bootstrap/scss/bootstrap";
+@import "bootswatch/dist/simplex/bootswatch";
+
+// fontawesome
+@import '@fortawesome/fontawesome-free/scss/fontawesome';
+

JS、CSS、画像の置き場所を全体的に変更します。

JS: app/javascript/pack => app/javascript

CSS: app/javascript/stylesheets => app/assets/stylesheets

画像: app/javasript/images => app/assets/images

アセットの呼び出し方法を変更します。

diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 9290dda..75a118d 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -20,7 +20,7 @@ description.strip!
   <meta property="og:type" content="website" />
   <meta property="og:title" content="<%= title %>" />
   <meta property="og:url" content="<%= request.url %>" />
-  <meta property="og:image" content="<%= asset_pack_path 'media/images/apple-touch-icon-144x144-precomposed.png' %>" />
+  <meta property="og:image" content="<%= asset_path 'apple-touch-icon-144x144-precomposed.png' %>" />


   <meta name="theme-color" content="#d97368">


@@ -43,32 +43,31 @@ description.strip!
   <%= csp_meta_tag %>


-  <%= stylesheet_pack_tag "application" %>
-  <%= javascript_pack_tag "application", defer: true %>
-
-
   <!-- For third-generation iPad with high-resolution Retina display: -->
   <!-- Size should be 144 x 144 pixels -->
-  <%= favicon_link_tag (asset_pack_path('media/images/apple-touch-icon-144x144-precomposed.png')), :rel => 'apple-touch-icon-precomposed', :type => 'image/png', :sizes => '144x144', skip_pipeline: true  %>
+  <%= favicon_link_tag (asset_path('apple-touch-icon-144x144-precomposed.png')), :rel => 'apple-touch-icon-precomposed', :type => 'image/png', :sizes => '144x144', skip_pipeline: true  %>


   <!-- For iPhone with high-resolution Retina display: -->
   <!-- Size should be 114 x 114 pixels -->
-  <%= favicon_link_tag (asset_pack_path('media/images/apple-touch-icon-114x114-precomposed.png')), :rel => 'apple-touch-icon-precomposed', :type => 'image/png', :sizes => '114x114' %>
+  <%= favicon_link_tag (asset_path('apple-touch-icon-114x114-precomposed.png')), :rel => 'apple-touch-icon-precomposed', :type => 'image/png', :sizes => '114x114' %>


   <!-- For first- and second-generation iPad: -->
   <!-- Size should be 72 x 72 pixels -->
-  <%= favicon_link_tag (asset_pack_path('media/images/apple-touch-icon-72x72-precomposed.png')), :rel => 'apple-touch-icon-precomposed', :type => 'image/png', :sizes => '72x72' %>
+  <%= favicon_link_tag (asset_path('apple-touch-icon-72x72-precomposed.png')), :rel => 'apple-touch-icon-precomposed', :type => 'image/png', :sizes => '72x72' %>


   <!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
   <!-- Size should be 57 x 57 pixels -->
-  <%= favicon_link_tag (asset_pack_path('media/images/apple-touch-icon-precomposed.png')), :rel => 'apple-touch-icon-precomposed', :type => 'image/png' %>
+  <%= favicon_link_tag (asset_path('apple-touch-icon-precomposed.png')), :rel => 'apple-touch-icon-precomposed', :type => 'image/png' %>


   <!-- For all other devices -->
   <!-- Size should be 32 x 32 pixels -->
-  <%= favicon_link_tag (asset_pack_path('media/images/favicon.ico')), :rel => 'shortcut icon' %>
+  <%= favicon_link_tag (asset_path('favicon.ico')), :rel => 'shortcut icon' %>


   <%= google_tag_manager_script_tag(:default) %>


+    <%= stylesheet_link_tag "application" %>
+    <%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>
+
   </head>
   <body>

開発サーバのスタート方法を変更します。

diff --git a/start.sh b/start.sh
index 1df6187..e986393 100755
--- a/start.sh
+++ b/start.sh
@@ -7,5 +7,6 @@ bundle exec rails db:migrate


 rm -f /app/tmp/pids/server.pid
-bundle exec rails server -b '0.0.0.0'
+
+bin/dev

webpack関連のファイルを削除します。

config/webpacker.yml
config/webpack/*
bin/webpack
bin/webpack-dev-server
postcss.config.js
.browserslistrc
babel.config.js

docker-compose.ymlからwebpack-dev-serverを削除

diff --git a/docker-compose.yml b/docker-compose.yml
index e9a41fd..6027e93 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -3,7 +3,6 @@ services:
   app:
     build: .
     environment:
-      WEBPACKER_DEV_SERVER_HOST: webpack
       BUNDLE_JOBS: 4
     volumes:
       - .:/app
@@ -12,20 +11,6 @@ services:
     command: ./start.sh
     ports:
       - "3000:3000"
-    depends_on:
-      - webpack
-
-  webpack:
-    build: .
-    volumes:
-      - .:/app
-      - bundle_app2:/usr/local/bundle:cached
-    ports:
-      - "3035:3035"
-    command: bin/webpack-dev-server
-    environment:
-      WEBPACKER_DEV_SERVER_HOST: 0.0.0.0
-      WEBPACKER_DEV_SERVER_HOT: 1

差分#

変更したファイルやファイルの量はこんな感じです。yarn.lockがかなり減りました。

> git diff ee5315a51ea69c1573f5434fb0e1761bb675fcdf --stat
 .browserslistrc                                                            |    1 -
 .gitignore                                                                 |    3 +
 Dockerfile                                                                 |    1 +
 Gemfile                                                                    |   21 +-
 Gemfile.lock                                                               |   21 +-
 Procfile.dev                                                               |    3 +
 app/assets/builds/.keep                                                    |    0
 app/assets/config/manifest.js                                              |   12 +-
 app/{javascript => assets}/images/apple-touch-icon-114x114-precomposed.png |  Bin
 app/{javascript => assets}/images/apple-touch-icon-144x144-precomposed.png |  Bin
 app/{javascript => assets}/images/apple-touch-icon-72x72-precomposed.png   |  Bin
 app/{javascript => assets}/images/apple-touch-icon-precomposed.png         |  Bin
 app/{javascript => assets}/images/discord.png                              |  Bin
 app/{javascript => assets}/images/favicon.ico                              |  Bin
 app/{javascript => assets}/images/graphql_query.png                        |  Bin
 app/{javascript => assets}/images/ss.png                                   |  Bin
 app/assets/stylesheets/application.sass.scss                               |    8 +
 app/controllers/postcodes_controller.rb                                    |   14 +-
 app/javascript/{packs => }/application.js                                  |   20 +-
 app/javascript/controllers/application.js                                  |   10 +
 app/javascript/controllers/home.js                                         |   25 +
 app/javascript/controllers/index.js                                        |   12 +
 app/javascript/packs/home.js                                               |   36 -
 app/javascript/stylesheet/bootstrap_variables.scss                         |    3 -
 app/javascript/stylesheet/style.scss                                       |    4 +-
 app/views/layouts/application.html.erb                                     |   19 +-
 babel.config.js                                                            |   65 -
 bin/dev                                                                    |    9 +
 bin/webpack                                                                |   18 -
 bin/webpack-dev-server                                                     |   18 -
 config/environments/production.rb                                          |   17 +
 config/initializers/assets.rb                                              |   13 +
 config/routes.rb                                                           |    4 +-
 config/webpack/development.js                                              |    9 -
 config/webpack/environment.js                                              |   12 -
 config/webpack/production.js                                               |    5 -
 config/webpack/test.js                                                     |    5 -
 config/webpacker.yml                                                       |   92 --
 docker-compose.production.yml                                              |    4 +-
 docker-compose.yml                                                         |   15 -
 package.json                                                               |   25 +-
 postcss.config.js                                                          |   12 -
 start.sh                                                                   |    3 +-
 yarn.lock                                                                  | 7422 +++------------------------------------------------------------------------------------------
 51 files changed, 492 insertions(+), 7540 deletions(-)

まとめ#

  • 開発時のコンパイルが高速になったのでとても快適です。
  • 資料が少ないし、いまいち構造がよくわからないので半日ぐらいかかりました。
webpackerを削除してcssbundling-rails+jsbundling-rails+propshaftに移行
https://blog.teraren.com/posts/removing-webpacker/
作者
Yuki Matsukura
公開日
2022-10-09
ライセンス
CC BY-NC-SA 4.0
ExcelやGoogle Spreadsheetで郵便番号から住所を補完
RailsのアクターがN:Mのシステムを作るときの権限モデル

関連記事

Rail7の推奨になったimportmap+ dartsassを使ってサービスを構築してみました
2022-12-14Ruby on Rails
Rails7 + importmap + dartsass-rails
2022-10-16Ruby on Rails
末尾の半角スペースで困惑：ActiveModelとMySQLの連携問題
2023-04-14Ruby on Rails

コメント

© 2026 Yuki Matsukura. All Rights Reserved. / RSS / Sitemap / プライバシーポリシー