변화 Gem -> Webpacker
예전에는 Gemfile에서 관리했다면
# gem 'coffee-rails'
# gem 'cljs-rails'
# gem 'typescript-rails', git: 'https://github.com/ScriptonBasestar-io/typescript-rails.git'
요즘에는 webpakcer를 통해 npm으로 관리한다.
"typescript": "^3.8.3",
구조가 좀 바뀌었다.
rails new 하면 예전에는 coffeesciprt를 넣어줬는데
요즘엔 기본구성이 아래처럼 변경됐다.
# Use SCSS for stylesheets
gem 'sass-rails', '>= 6'
# Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
gem 'webpacker', '~> 4.0'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
예전에는 화면쪽 리소스가
/app/assets/stylesheets
/app/assets/javascript s???
에 있었고
stylesheet_link_tag
javascript_include_tag
를 사용했는데
webpacker를 사용하면서
/app/javascript/packs/**/*.(js|ts)
/app/javascript/stylesheets/**/*.(css|scss|sass)
에 파일을 놔두고
stylesheet_pack_tag
javascript_pack_tag
를 사용한다.
본좌는 stylesheet는 구 방식을 사용중이다
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%#= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
하지만 스크립트는 웹팩으로
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
그리고 아랫쪽에 스크립트를 넣어줬다.
모듈별
<%= javascript_pack_tag controller_name if pack_exists?(controller_name) %>
화면, 액션별
<%= javascript_pack_tag "#{controller_name}-#{action_name}" if pack_exists?("#{controller_name}-#{action_name}") %>
이런건 쓰지말자 웹팩이 캡술화를 시켜버려서 화면에다가 스크립트 박아넣으면 제대로 동작하지 않는다.
<%= yield :javascript %>
관리 포인트가 분리되서 더 좋은 것 같다.
예전엔 npm이 업데이트되고 gem이 업데이트되야 사용할 수 있었을텐데
이젠 npm 최신버전 적용이 더 수워졌을테니
turbolink 때문에 화면전환시 로딩이 줄어들지만
document.ready가 제대로 동작하지 않는 경우가 있으니 주의해야한다
$(document).on('turbolinks:load',function () {
});