Nobuild dengan Rails dan Importmap

Versi terkini Ruby on Rails telah memfokuskan pada kesederhanaan merentas pelbagai aspek rangka kerja, disertai dengan janji untuk kembali kepada "rangka kerja satu orang" (di mana satu pembangun boleh membina dan mengekalkan keseluruhan aplikasi dengan berkesan).

Pustaka Importmap Rails adalah berdasarkan prinsip bahawa pelayar web moden telah mengejar spesifikasi ECMAScript dan boleh mentafsir Modul ES (ESM). Sebagai standard web, Importmap membolehkan anda mengawal cara modul JavaScript diselesaikan dalam penyemak imbas dan mengurus kebergantungan serta versi tanpa perlu mentranspile atau menggabungkan kod yang dihantar ke penyemak imbas.

Cara Piawaian Web Importmap Berfungsi

Semuanya bermula dengan teg skrip jenis importmap yang ditakrifkan dalam reka letak atau halaman web utama aplikasi anda. Di dalam teg ini, objek JSON mentakrifkan alias dan laluan sepadannya ke kod sumber.

<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>

Dalam peta yang sama, anda boleh mencampurkan laluan perpustakaan yang menghala ke CDN atau menggunakan sumber tempatan. Untuk menggunakan perpustakaan daripada peta ini, rujuk nama alias.

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

Dan dalam application.js anda, import kebergantungan yang diperlukan:

// application.js

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

import "utils";

Sokongan Importmap hadir dalam penyemak imbas Chrome 89 , Safari 16.4 , Firefox 108 dan Edge 89 . Untuk pelayar lama, sertakan polyfill:

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

Cara Importmap Berfungsi dalam Ruby on Rails

Fungsi Importmap dalam Ruby on Rails mengikut standard yang sama yang diterangkan di atas dan menawarkan cara mudah untuk membuat peta dan fail versi. Menggunakan aplikasi web bernama heroImage sebagai contoh (kod sumber tersedia di Github), mari kita terokai pelaksanaannya.

Apabila anda mencipta aplikasi Rails 8 baharu, permata importmap-rails ditambah dan dipasang secara lalai. Fail config/importmap.rb dibuat di mana anda boleh pin kod JavaScript yang diperlukan dalam aplikasi anda.

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

Kata kunci pin memerlukan sehingga tiga argumen. Yang pertama diperlukan, kerana ia adalah alias kod JavaScript. pin "aplikasi" ialah pintasan untuk fail application.js dengan alias aplikasi:

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

Apabila nama alias dan nama fail berbeza, gunakan kata kunci untuk::

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

Kata kunci pin_all_from membantu merujuk berbilang fail serentak. Argumen pertama ialah laluan di mana fail JavaScript berada, dan argumen di bawah: awalan alias untuk setiap fail. Alias ​​yang dijana menggunakan awalan di bawah dan nama fail, seperti pengawal/pengawal amaran untuk fail alert_controller.js.

Untuk menggambarkan fail JSON Peta Import, jalankan:

<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 menyelesaikan semua JavaScript melalui permata Propshaft, yang menyelesaikan laluan fizikal kod JavaScript, memetakan ke laluan web /assets dan menambah ringkasan pada setiap fail untuk caching dan ketidaksahihan yang lebih baik.

Propshaft menemui laluan fizikal daripada konfigurasi aset:

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

Pastikan fail anda wujud dalam mana-mana laluan yang didaftarkan atau tambahkan laluan anda sendiri untuk ditemui oleh Propshaft dan Importmap.

Importmap dalam Rails membolehkan anda menentukan cara penyemak imbas harus memuatkan fail JavaScript. Terdapat dua pilihan: pramuat (lalai) dan tiada pramuat. Pramuat memberitahu penyemak imbas untuk memuat turun fail secepat mungkin. Importmap menjana teg pautan dengan rel="modulepreload":

// application.js

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

import "utils";

Jika anda menetapkan argumen pramuat kepada palsu, teg pautan tidak dijana dan penyemak imbas memuat turun fail apabila diperlukan.

Dengan Rails’ Importmap, anda juga boleh pin kod JavaScript daripada CDN menggunakan argumen to: untuk URL:

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

Peta Import termasuk CLI untuk pin atau nyahsemat kod JavaScript ke dalam fail config/importmap.rb. Ia juga termasuk perintah untuk mengemas kini, mengaudit dan memeriksa versi:

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

Apabila menggunakan perintah pin untuk pakej JavaScript, bukannya menetapkan argumen to: ke CDN, Importmap menyelesaikan kebergantungan pakej dan memuat turun pakej dan kebergantungan ke vendor/javascript , membenarkan aplikasi Rails untuk menyampaikan fail tersebut:

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

Pendekatan ini berfungsi dengan baik apabila pakej anda mempunyai kebergantungan mudah atau kebergantungan yang jelas dalam pakej JavaScript. Jika itu tidak berlaku, ia menjadi mencabar untuk digunakan dengan Importmap yang membekalkan kod di vendor/javascript. Ia mungkin berfungsi dengan penambahan URL dan pergantungan manual, atau anda boleh mengubah suai kod vendor untuk menjadikannya berfungsi.

Bagaimana untuk Bekerja dengan Rails Gems - Enjin - dan Importmap?

Terdapat dua pendekatan untuk mencipta permata Ruby on Rails yang serasi dengan Importmap. Pendekatan pertama membolehkan permata anda menyediakan kod JavaScript, yang boleh anda pilih untuk disematkan dalam konfigurasi Peta Import. Beginilah cara permata turbo-rel dan stimulus-rails.

Letakkan kod JavaScript anda dalam folder app/assets/javascripts permata anda. Anda mungkin memerlukan proses tambahan yang meminimumkan fail JavaScript dan menjana fail peta JavaScript. Kemudian, di dalam kelas Enjin, tentukan cangkuk pemula untuk mengisytiharkan kod JavaScript anda dengan Propshaft:

<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>

Pilihan kedua menggunakan fail konfigurasi Importmap. Jika enjin anda mempunyai templat reka letaknya dan paparan diasingkan daripada aplikasi hos, dan enjin tidak perlu berkongsi kod JavaScript dengan aplikasi hos, anda boleh mencipta fail konfigurasi Importmap di config/importmap.rb , tetapkan pin anda, letakkan kod JavaScript anda di app/javascript dan konfigurasikan enjin dengan pemula.

Buka fail engine.rb Ruby anda dan tambahkan fail konfigurasi Importmap dan penyapu:

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

Nyatakan Peta Import untuk digunakan dalam templat reka letak enjin anda:

// application.js

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

import "utils";

Untuk berkongsi kod JavaScript dengan aplikasi hos, seperti pengawal Rangsangan, buat fail konfigurasi Peta Import separa dan tetapkan enjin untuk menggabungkannya dengan yang utama dalam aplikasi hos.

Buat fail konfigurasi Importmap di config/importmap.rb dan tambahkan pin JavaScript untuk dikongsi dengan aplikasi hos. Jika anda mempunyai kebergantungan untuk pakej luaran, tambahkannya melalui penjana atau pemasang pada aplikasi hos:

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

Buka fail engine.rb anda dan tambahkan pemula:

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

Apakah Kelebihan Menggunakan Importmap?

Dari perspektif pembangun Ruby on Rails, kelebihan utama menggunakan Importmap ialah kebebasan daripada memerlukan nod seperti masa jalan JavaScript dan kebebasan daripada pergantungan node_modules.

Selain itu, anda tidak memerlukan proses tambahan dalam mod pembangunan untuk mentranspile dan mengecilkan kod JavaScript. Anda bergantung pada piawaian web untuk menyampaikan kod kepada penyemak imbas. Menggunakan aplikasi Rails anda di belakang proksi terbalik menawarkan beberapa faedah. Pertama, jika anda mendayakan protokol HTTP/2, penyemak imbas anda boleh mengambil berbilang fail dengan sambungan HTTP tunggal dan memuat turun banyak fail JavaScript kecil tidak akan menjejaskan prestasi.

Mendayakan proksi anda menggunakan pemampatan gzip atau brotli memastikan anda menghantar fail yang sangat kecil sambil mengekalkan kebolehbacaan apabila menggunakan alatan pembangun penyemak imbas. Jika anda menukar satu fail, anda hanya perlu membatalkan fail khusus itu, yang akan dimuat turun oleh penyemak imbas. Penyemak imbas mengetahui bahawa fail telah diubah suai kerana cap jari yang ditambahkan oleh Propshaft pada semua fail.

Menggunakan proksi terbalik seperti Thruster bersama-sama Puma memunggah aset yang disiarkan daripada aplikasi Rails. Pendorong boleh cache aset dan menyediakannya apabila pelanggan meminta fail.

Bila Tidak Menggunakan Importmap

Terdapat kes di mana anda harus mengelak daripada menggunakan Importmap dalam aplikasi Rails. Jika anda sedang membina aplikasi SPA dengan React, Vue, atau mana-mana alat lain yang serupa, terdapat kemungkinan besar anda menulis kod anda dengan TypeScript. Dalam kes ini, anda harus berpegang pada strategi penggabungan.

Selain itu, jika anda perlu menyokong penyemak imbas lama, penggabungan dengan transpilasi kod ialah pilihan yang lebih baik.

Atas ialah kandungan terperinci Nobuild dengan Rails dan Importmap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!