Rails 및 Importmap을 사용한 Nobuild-JS 튜토리얼-php.cn

Ruby on Rails의 최신 버전은 프레임워크의 다양한 측면에서 단순성에 중점을 두고 있으며, "1인 프레임워크"(한 명의 개발자가 전체 애플리케이션을 효과적으로 구축하고 유지 관리할 수 있는 프레임워크)로 돌아갈 것을 약속합니다.

Importmap Rails 라이브러리는 최신 웹 브라우저가 ECMAScript 사양을 따라잡고 ES 모듈(ESM)을 해석할 수 있다는 원칙을 기반으로 합니다. 웹 표준인 Importmap을 사용하면 브라우저에 전송된 코드를 트랜스파일하거나 번들링할 필요 없이 브라우저에서 JavaScript 모듈이 해결되는 방식을 제어하고 종속성 및 버전을 관리할 수 있습니다.

Importmap 웹 표준의 작동 방식

모든 것은 애플리케이션의 기본 레이아웃이나 웹 페이지에 정의된 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";

로그인 후 복사

Importmap 지원은 Chrome 89, Safari 16.4, Firefox 108 및 Edge 89 브라우저에 있습니다. 이전 브라우저의 경우 폴리필을 포함하세요.

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

로그인 후 복사

Ruby on Rails에서 Importmap이 작동하는 방식

Ruby on Rails의 Importmap 기능은 위에서 설명한 것과 동일한 표준을 따르며 맵과 버전 파일을 생성하는 쉬운 방법을 제공합니다. heroImage라는 웹 애플리케이션을 예로 들어(Github에서 소스 코드 사용 가능) 구현을 살펴보겠습니다.

Nobuild with Rails and Importmap

새 Rails 8 애플리케이션을 생성하면 importmap-rails gem이 기본적으로 추가 및 설치됩니다. 애플리케이션에 필요한 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

로그인 후 복사

pin 키워드는 최대 3개의 인수를 사용합니다. 첫 번째 항목은 JavaScript 코드의 별칭이므로 필수입니다. pin "application"은 별칭이 application:인 application.js
파일에 대한 바로가기입니다.

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

로그인 후 복사

별칭과 파일 이름이 다른 경우 키워드를 사용하여::

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

로그인 후 복사

pin_all_from 키워드는 여러 파일을 한 번에 참조하는 데 도움이 됩니다. 첫 번째 인수는 JavaScript 파일이 있는 경로이고 under: 인수는 각 파일의 별칭 앞에 붙습니다. 생성된 별칭은 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는 JavaScript 코드의 물리적 경로를 확인하고 /assets 웹 경로에 매핑하며 더 나은 캐싱 및 무효화를 위해 각 파일에 다이제스트를 추가하는 Propshaft gem을 통해 모든 JavaScript를 확인합니다.

Propshaft는 자산 구성에서 물리적 경로를 발견합니다.

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

로그인 후 복사

등록된 경로에 파일이 있는지 확인하거나 Propshaft 및 Importmap에서 검색할 경로를 직접 추가하세요.

Rails의 Importmap을 사용하면 브라우저가 JavaScript 파일을 로드하는 방법을 지정할 수 있습니다. 사전 로드(기본값)와 사전 로드 없음의 두 가지 옵션이 있습니다. Preload는 가능한 한 빨리 파일을 다운로드하도록 브라우저에 지시합니다. 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에는 JavaScript 코드를 config/importmap.rb 파일에 고정하거나 고정 해제할 수 있는 CLI가 포함되어 있습니다. 또한 버전을 업데이트, 감사 및 검사하는 명령도 포함되어 있습니다.

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 명령을 사용하는 경우 to: 인수를 CDN으로 설정하는 대신 Importmap은 패키지 종속성을 확인하고 패키지 및 종속성을 vendor/javascript에 다운로드합니다. , Rails 애플리케이션이 해당 파일을 제공할 수 있도록 허용합니다.

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

로그인 후 복사

이 접근 방식은 패키지에 JavaScript 패키지에 간단한 종속성이 있거나 잘 정의된 종속성이 있는 경우에 효과적입니다. 그렇지 않은 경우 vendor/javascript에서 코드를 공급하는 Importmap을 사용하기가 어려워집니다. URL 및 수동 종속성 추가로 작동할 수도 있고 공급업체 코드를 조정하여 작동하게 할 수도 있습니다.

Rails Gems(엔진) 및 Importmap을 사용하는 방법은 무엇입니까?

Importmap과 호환되는 Ruby on Rails gem을 생성하는 데는 두 가지 접근 방식이 있습니다. 첫 번째 접근 방식을 사용하면 gem이 JavaScript 코드를 제공할 수 있으며, 이를 Importmap 구성에 고정하도록 선택할 수 있습니다. 이것이 turbo-rails 및 자극 레일 gem이 구현되는 방식입니다.

Gem의 app/assets/javascripts 폴더에 JavaScript 코드를 넣으세요. 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>

로그인 후 복사

엔진 레이아웃 템플릿에 사용할 Importmap을 지정하세요.

// application.js

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

import "utils";

로그인 후 복사

Stimulus 컨트롤러와 같은 호스트 애플리케이션과 JavaScript 코드를 공유하려면 부분 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 코드를 변환하고 축소하기 위해 추가 프로세스가 필요하지 않습니다. 브라우저에 코드를 제공하기 위해 웹 표준을 사용합니다. 역방향 프록시 뒤에 Rails 애플리케이션을 배포하면 여러 가지 이점을 얻을 수 있습니다. 첫째, HTTP/2 프로토콜을 활성화하면 브라우저는 단일 HTTP 연결로 여러 파일을 가져올 수 있으며 작은 JavaScript 파일을 많이 다운로드해도 성능에 영향을 미치지 않습니다.

Nobuild with Rails and Importmap

gzip 또는 brotli 압축을 사용하도록 프록시를 활성화하면 브라우저 개발자 도구를 사용할 때 가독성을 유지하면서 아주 작은 파일을 보낼 수 있습니다. 하나의 파일을 변경하는 경우 브라우저가 다운로드할 특정 파일만 무효화하면 됩니다. 브라우저는 Propshaft가 모든 파일에 추가하는 지문으로 인해 파일이 수정되었음을 알고 있습니다.

Puma와 함께 Thruster와 같은 역방향 프록시를 사용하면 Rails 애플리케이션에서 제공되는 자산이 오프로드됩니다. Thruster는 자산을 캐시하고 클라이언트가 파일을 요청할 때 이를 제공할 수 있습니다.

Importmap을 사용하지 말아야 할 경우

Rails 애플리케이션에서 Importmap을 사용하지 말아야 하는 경우가 있습니다. React, Vue 또는 기타 유사한 도구를 사용하여 SPA 애플리케이션을 구축하는 경우 TypeScript를 사용하여 코드를 작성할 가능성이 높습니다. 이런 경우에는 번들링 전략을 고수해야 합니다.

또한 이전 브라우저를 지원해야 하는 경우 코드 변환 기능을 번들로 묶는 것이 더 나은 옵션입니다.

위 내용은 Rails 및 Importmap을 사용한 Nobuild의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!