Nobuild 與 Rails 和 Importmap

最新版本的 Ruby on Rails 專注於框架不同方面的簡單性，並承諾回歸「單人框架」（單一開發人員可以有效地建立和維護整個應用程式）。

Importmap Rails 庫基於現代 Web 瀏覽器已經趕上 ECMAScript 規範並且可以解釋 ES 模組（ESM）的原理。作為 Web 標準，Importmap 可讓您控制 JavaScript 模組在瀏覽器中的解析方式並管理依賴項和版本，而無需轉譯或捆綁發送到瀏覽器的程式碼。

Importmap Web 標準的工作原理

這一切都始於應用程式主版面或網頁中定義的 importmap 類型的腳本標籤。在此標籤內，一個 JSON 物件定義了別名及其對應的原始碼路徑。

<script type="importmap">
  {
    "imports": {
      "application": "/assets/application.js",
      "local-time": "https://cdn.jsdelivr.net/npm/local-time@3.0.2/app/assets/javascripts/local-time.es2017-esm.min.js",
      "utils": "/assets/utils.js"
    }
  }
</script>

在同一個地圖中，您可以混合指向 CDN 或使用本地資源的庫路徑。要使用此地圖中的庫，請引用別名。

<!-- Below the importmap script -->
<script type="module">import "application"</script>

並在您的application.js中，匯入所需的依賴項：

// application.js

import LocalTime from "local-time";
LocalTime.start();

import "utils";

瀏覽器 Chrome 89 、 Safari 16.4 、 Firefox 108 和 Edge 89 皆支援導入地圖。對於較舊的瀏覽器，請包含一個polyfill：

<script
  async
  src="https://ga.jspm.io/npm:es-module-shims@1.10.1/dist/es-module-shims.js"
></script>

Importmap 在 Ruby on Rails 中的工作原理

Ruby on Rails 中的匯入映射功能遵循上述相同標準，並提供了一種建立映射和版本檔案的簡單方法。使用名為 heroImage 的 Web 應用程式作為範例（原始程式碼可在 Github 上取得），讓我們探索一下實作。

當您建立新的 Rails 8 應用程式時，預設會新增並安裝 importmap-rails gem。將建立一個檔案config/importmap.rb，您可以在其中固定應用程式中所需的JavaScript程式碼。

pin "application"

pin "@hotwired/turbo-rails", to: "turbo.min.js"
pin "@hotwired/stimulus", to: "stimulus.min.js"
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js"

pin_all_from "app/javascript/controllers", under: "controllers", preload: false

pin 關鍵字最多需要三個參數。第一個是必需的，因為它是 JavaScript 程式碼的別名。 pin「application」是檔案 application.js 的捷徑，別名為 application:

pin "application", to: "application.js"

當別名和檔案名稱不同時，使用關鍵字::

pin "@hotwired/turbo-rails", to: "turbo.min.js"

pin_all_from 關鍵字有助於一次引用多個檔案。第一個參數是 JavaScript 檔案所在的路徑，under: 參數是每個檔案的別名的前綴。產生的別名使用下的前綴和檔名，例如alert_controller.js檔案的controllers/alert-controller。

要視覺化 Importmap JSON 文件，請執行：

<script type="importmap">
  {
    "imports": {
      "application": "/assets/application.js",
      "local-time": "https://cdn.jsdelivr.net/npm/local-time@3.0.2/app/assets/javascripts/local-time.es2017-esm.min.js",
      "utils": "/assets/utils.js"
    }
  }
</script>

Rails 透過Propshaft gem 解析所有JavaScript，它解析JavaScript 程式碼的實體路徑，對應到/assets Web 路徑，並將摘要新增到每個檔案中，以實現更好的快取和失效。

Propshaft 從資產配置發現實體路徑：

<!-- Below the importmap script -->
<script type="module">import "application"</script>

確保您的檔案存在於任何已註冊的路徑中，或新增您自己的路徑以供 Propshaft 和 Importmap 發現。

Rails 中的 Importmap 可讓您指定瀏覽器應如何載入 JavaScript 檔案。有兩個選項：預先載入（預設）和無預載。預先載入告訴瀏覽器盡快下載檔案。 Importmap 產生一個帶有 rel="modulepreload":
的連結標籤

// application.js

import LocalTime from "local-time";
LocalTime.start();

import "utils";

如果將 preload 參數設為 false，則不會產生連結標籤，瀏覽器會在需要時下載檔案。

使用 Rails 的 Importmap，您也可以使用 URL 的 to: 參數固定 CDN 中的 JavaScript 程式碼：

<script
  async
  src="https://ga.jspm.io/npm:es-module-shims@1.10.1/dist/es-module-shims.js"
></script>

Importmap 包含一個 CLI，用於將固定 或取消固定 JavaScript 程式碼到config/importmap.rb 檔案中。它還包括更新、審核和檢查版本的命令：

pin "application"

pin "@hotwired/turbo-rails", to: "turbo.min.js"
pin "@hotwired/stimulus", to: "stimulus.min.js"
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js"

pin_all_from "app/javascript/controllers", under: "controllers", preload: false

當對JavaScript 套件使用pin 指令時，Importmap 不會將to: 參數設為CDN，而是解析套件依賴項並將套件和相依性下載到vendor/javascript ，允許Rails 應用程式提供這些檔案：

pin "application", to: "application.js"

當您的套件在 JavaScript 套件中具有簡單的依賴項或定義良好的依賴項時，此方法效果很好。如果情況並非如此，使用 Importmap 在 vendor/javascript 供應程式碼會變得具有挑戰性。它可能與 URL 和手動依賴項添加一起使用，或者您可以調整供應商的程式碼以使其工作。

如何使用 Rails Gems - 引擎 - 和 Importmap？

有兩種方法可以建立與 Importmap 相容的 Ruby on Rails gem。第一種方法可讓您的 gem 提供 JavaScript 程式碼，您可以選擇將其固定在 Importmap 配置中。這就是 turbo-rails 和 stimulus-rails gem 的實作方式。

將 JavaScript 程式碼放入 gem 的 app/assets/javascripts 資料夾中。您可能需要一個額外的過程來縮小 JavaScript 檔案並產生 JavaScript 映射檔案。然後，在 Engine 類別中，定義一個初始化器鉤子以使用 Propshaft 宣告 JavaScript 程式碼：

<script type="importmap">
  {
    "imports": {
      "application": "/assets/application.js",
      "local-time": "https://cdn.jsdelivr.net/npm/local-time@3.0.2/app/assets/javascripts/local-time.es2017-esm.min.js",
      "utils": "/assets/utils.js"
    }
  }
</script>

第二個選項使用 Importmap 設定檔。如果您的引擎有其佈局模板，並且視圖與主機應用程式隔離，且引擎不需要與主機應用程式共用JavaScript 程式碼，您可以在config/importmap.rb 建立一個Importmap 設定檔，設置腳，將JavaScript 程式碼放置在app/javascript，並使用初始值設定項配置引擎。

開啟您的engine.rb Ruby 檔案並新增Importmap 設定檔和掃描器：

<!-- Below the importmap script -->
<script type="module">import "application"</script>

指定要在引擎佈局範本中使用的匯入對映：

// application.js

import LocalTime from "local-time";
LocalTime.start();

import "utils";

要與主機應用程式共用 JavaScript 程式碼（例如 Stimulus 控制器），請建立部分 Importmap 設定檔並將引擎設定為將其與主機應用程式中的主檔案合併。

在 config/importmap.rb 建立一個 Importmap 設定文件，並新增 JavaScript 引腳以與主機應用程式共用。如果您有外部套件的依賴項，請透過產生器或安裝程式將它們新增至主機應用程式：

<script
  async
  src="https://ga.jspm.io/npm:es-module-shims@1.10.1/dist/es-module-shims.js"
></script>

開啟你的engine.rb 檔案並加入一個初始化器：

pin "application"

pin "@hotwired/turbo-rails", to: "turbo.min.js"
pin "@hotwired/stimulus", to: "stimulus.min.js"
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js"

pin_all_from "app/javascript/controllers", under: "controllers", preload: false

使用 Importmap 有什麼優點？

從 Ruby on Rails 開發人員的角度來看，使用 Importmap 的主要優點是不需要類似 JavaScript 運行時的節點，並且不受 node_modules 依賴關係。

此外，您不需要在開發模式下進行額外的過程來轉譯和縮小 JavaScript 程式碼。您依靠 Web 標準將程式碼提供給瀏覽器。在反向代理後面部署 Rails 應用程式有幾個好處。首先，如果您啟用 HTTP/2 協議，您的瀏覽器可以透過單一 HTTP 連接取得多個文件，並且下載許多小型 JavaScript 文件不會影響效能。

啟用代理程式使用 gzip 或 brotli 壓縮可確保您傳送非常小的文件，同時在使用瀏覽器開發人員工具時保持可讀性。如果更改一個文件，只需使瀏覽器下載的該特定文件失效即可。由於 Propshaft 新增到所有檔案的指紋，瀏覽器知道檔案已被修改。

使用像 Thruster 這樣的反向代理以及 Puma 可以卸載 Rails 應用程式提供的資源。 Thruster 可以快取資源並在用戶端請求檔案時提供它們。

何時不使用導入映射

在某些情況下，您應該避免在 Rails 應用程式中使用 Importmap。如果您正在使用 React、Vue 或任何其他類似工具來建立 SPA 應用程序，那麼您很可能正在使用 TypeScript 編寫程式碼。在這種情況下，您應該堅持捆綁策略。

此外，如果您需要支援較舊的瀏覽器，與代碼轉譯捆綁在一起是更好的選擇。

以上是Nobuild 與 Rails 和 Importmap的詳細內容。更多資訊請關注PHP中文網其他相關文章！