概要
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": "[email protected]",
- "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"
}
}
設定ファイルを自動作成します。
./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(-)
まとめ
- 開発時のコンパイルが高速になったのでとても快適です。
- 資料が少ないし、いまいち構造がよくわからないので半日ぐらいかかりました。
Comments