Rails 最新的版本為 7

目前 Github 、 shopify 都已經使用 Rails 7 囉

有在寫 Rails 的人應該都知道 Rails 7 把 Webpack 拿掉了

接下來我們來看一下 Rails 7 該怎麼打包這些靜態檔案

根據官網，考量到安全性的問題

Rails 7 不使用 webpack 來打包靜態檔案，改用其他方式打包

分成兩個選項

1. Asset Pipeline + ImportMap
2. cssbundling && jsbundling

Asset Pipeline + ImportMap

Asset Pipeline 在一開始的時候有介紹過了，有下列幾個功能

1. 整合靜態檔案，減少瀏覽器的 request
2. 改用 fingerprint，快速比對版本差異，減少對瀏覽器的 request
3. 支援 CSS、coffeeScript 等語言，寫 css 跟 js 更方便

不過在 Rails 7 中 Asset Pipeline已經不進行編譯及打包

主要是因為目前的瀏覽器都已經支援原生的 js

不過要怎麼找到 js 的路徑以及框架模組？

這部分會交給 ImportMap

ImportMap 會在 HTML 的 Header 插入一段 json 檔

<script type="importmap">{
  "imports": {
    "stimulus": "/assets/stimulus-rainbow.js"
  }
}</script>

key 值為 js 的框架
value 值為 js 的檔案路徑
在執行 stimulus 時就會知道該去哪裡找檔案

cssbundling && jsbundling

Rails 7 載入了這兩個新的打包套件

cssbundling 支援 tailwind 、 bootstrap 等前端框架的格式

jsbundling 支援 esbuild 、 webpack 等打包套件

神奇的是

這兩個檔案是使用安裝配置的方式載入這些框架及打包套件

並不像一般的套件有運行的程式碼

最後再把這些文件交給 Sprockets 打包就可以囉