Rails 7은 지도 도입을 관심의 초점으로 삼았다

Rails 7은 JavaScript 생태계에 패러다임 변화를 가져옵니다.우리가 Rails를 좋아하는 이유 중 하나는 개발자들이 큰 변화를 두려워하지 않고 현재 상황에 도전하는 것이다.Import Maps은 Rails 7의 신제품이 아닙니다.그러나 혼란에서 벗어나려면 추진이 필요한 것, 바로 현재의 자바스크립트 생태계다.
우리는 모두 차세대 자바스크립트를 작성하고 싶습니다.이렇게 하면 우리로 하여금 각종 구축 도구를 배우고 사용하게 한다.많은 브라우저에서 ECMAScript 사양에 대한 다양한 새로운 기능을 지원하기 시작했습니다.ES Modules이 그중의 하나다.

브라우저의 ES 모듈 현재 상태
browsers that support ES Modules은 <script> 태그를 통해

은 현재 파일을 기준으로 상대 경로를 사용합니다.

  import foo, { bar } from "../../foobar.js";

또는 절대 경로(Webroot에 비해):

  import foo, { bar } from "/baz/foobar.js";

또는 URL:

  import foo, { bar } from "https://example.com/baz/foobar.js";

보시다시피 이것은 노드에 가져오는 작업 방식과 다르다.Node에서 NPM 패키지의 이름만 지정하면 됩니다.

import foo, { bar } from "foobar";

Node는 node_modules 폴더에서 패키지를 추출하는 방법을 알고 있습니다.브라우저의 누드 모듈 설명자를 통해 모듈을 인용하는 동일한 결과를 얻기 위해서는 맵을 가져와야 합니다.

지도 가져오기는 어떻게 합니까?
가져오기 맵은 말 그대로 가져오기의 맵입니다.그것들은 우리가 간단한 모듈 설명자를 사용하여 내용을 가져올 수 있도록 허용한다.매핑 정보는 <script>의 type="importmap" 태그를 사용하여 브라우저에 표시됩니다.

<script type="importmap">
  {
    "imports": {
      "foobar": "/baz/foobar.js"
    }
  }
</script>

지도를 가져오면 무엇을 할 수 있습니까?
그래.다음은 지도를 가져오는 기능들입니다. 그러나 이에 국한되지는 않습니다.전체 기능 목록은 official spec을 참조하십시오.

접두사
폴더 접두사(정확한 내용을 지정하는 대신 슬래시로 끝)를 지정할 수 있습니다.

{
  "imports": {
    "foobar/": "/baz/foobar/"
  }
}

접두어를 사용하여 /baz/foobar 폴더의 파일을 참조할 수 있습니다.

import foo from "foobar/foo.js";
import bar from "foobar/bar.js";

지문 인식
파일 지문 인식을 사용하면 브라우저가 파일 이름을 기준으로 파일을 무효화할 수 있습니다.

import foo, { bar } "/baz/foobar-46d0g2.js";

하지만 지문을 입력하면 두 가지 문제가 생깁니다.

파일 /baz/foobar.js이

으로 변경되면 지문을 변경하는 시스템이 필요합니다.

과 foobar.js의 파일 지문도 업데이트해야 한다.이것은 브라우저가 foobar.js의 코드만 변경되었더라도 이 두 파일을 다운로드해야 한다는 것을 의미한다.만약 더 많은 파일이 foobar.js에 의존한다면, 이것은 통제력을 잃을 수도 있다.

가져오기 매핑을 사용하여 지문 파일을 비지문 파일에 다시 매핑할 수 있습니다.

{
  "imports": {
    "/foobar.js": "/foobar-8ebg59.js"
  }
}

현재 맵 가져오기만 업데이트할 수 있으며 브라우저는 추가 비용을 부담하지 않습니다.

퇴로
맵을 가져오면 여러 맵을 지정할 수 있습니다.

{
  "imports": {
    "foobar": [
      "https://example.com/baz/foobar.js",
      "/baz/foobar.js"
    ]
  }
}

이는 브라우저가 도메인 차단 등의 이유로 /baz/foobar.js에 연락할 수 없도록 서버에서만 https://example.com을 다운로드하도록 지시합니다.

범위 경계
가져오기 맵에서 지정한 버전보다 다른 버전의 패키지가 필요한 의존성 문제가 있다고 가정해 봅시다.

{
  "imports": {
    "foobar": "/baz/foobar-v2.js",
    "barfoo": "/baz/barfoo.js"
  }
}

상기 장면에서 /baz/barfoo.js은 우리가 지정한 /baz/foobar-v1.js이 아니라 /baz/foobar-v2.js에 의존한다.이 문제를 해결하기 위해 "imports" 키에 다른 형제 키를 추가할 수 있습니다. 이를 "scopes"이라고 합니다.

{
  "imports": {
    "...": "..."
  },
  "scopes": {
    "/baz/barfoo.js": {
      "foobar": "/baz/foobar-v1.js"
    }
  }
}

이것은 브라우저가 파일 /baz/barfoo.js에서 "foobar"은 "/baz/foobar-v1.js"으로 해석해야 한다고 지시한다.

Rails는 어떻게 나타났습니까?
이 가져오기 맵을 수동으로 작성하는 것은 지루한 과정일 수도 있다.Rails는 가져오기 맵을 쉽게 생성할 수 있는 구성 파일(config/importmap.rb)을 제공합니다.config/importmap.rb 내부에서 두 가지 방법을 사용할 수 있습니다.

pin(name, to: nil, preload: false)

pin_all_from(dir, under: nil, to: nil, preload: false)

pin은 :to 옵션으로 지정된 매핑 파일과 이를 누드 모듈 설명자에 매핑하기 쉽습니다.

pin "foobar", to: "/baz/foobar.js"

이로써 누드 모듈 설명자 "foobar"은 "/baz/foobar.js"과 같은 자산 파이프 변환 파일에 비친다.

{
  "imports": {
    "foobar": "/assets/baz/foobar-i0f472.js"
  }
}

:to 옵션이 없습니다(자산 파이프라인의 파일 참조).

pin "foobar"

pin은 첫 번째 매개변수 자체에서 파일 이름을 추정합니다(.js으로 끝).

{
  "imports": {
    "foobar": "/assets/foobar-mt22u90.js"
  }
}

이런 방법의 묘미는 Import Map과 Rails의 자산 파이프라인이 완벽하게 통합되어 복잡한 구축 과정이 필요하지 않다는 데 있다.pin_all_from은 폴더 아래의 전체 파일 트리를 매핑할 수 있도록 약간씩 다릅니다(:under 옵션으로 지정).

pin_all_from "app/javascript/foobar", under: "foobar"

각 파일에 대해 pin개의 문을 작성할 필요가 없습니다.

{
  "imports": {
    "foobar/foo": "/assets/foobar/foo-v8th63e.js",
    "foobar/bar": "/assets/foobar/bar-wi93v01.js"
  }
}

제공되는 경우 foo.js 폴더에 bar.js 및 app/javascript/foobar 파일이 있습니다.또한 index.js과 foo.js 옆에 bar.js 파일이 있으면 :under이 지정한 값으로 직접 매핑됩니다.

{
  "imports": {
    "foobar/foo": "/assets/foobar/foo-e113b5.js",
    "foobar/bar": "/assets/foobar/bar-5b3d33.js",
    "foobar": "/assets/foobar/index-f70189.js"
  }
}

폴더의 파일을 완전히 다른 이름으로 매핑할 수도 있지만 주의해야 할 것은 :to 옵션을 제공해야 한다는 것입니다.

pin_all_from "app/javascript/foobar", under: "barfoo", to: "foobar"

이를 통해 Rails는 public/assets의 폴더를 찾을 수 있으며, app/javascript/foobar의 처리된 파일이 폴더 아래에 배치됩니다.

{
  "imports": {
    "barfoo/foo": "/assets/foobar/foo-e113b5.js",
    "barfoo/bar": "/assets/foobar/bar-5b3d33.js",
    "barfoo": "/assets/foobar/index-f70189.js"
  }
}

또한 모든 파일을 중첩된 폴더에 고정할 수도 있습니다.

pin_all_from "app/javascript/foobar/barfoo", under: "foobar/barfoo"

중첩된 폴더 barfoo/의 전체 트리 매핑:

{
  "imports": {
    "foobar/barfoo/bar": "/assets/foobar/barfoo/bar-e07c61.js",
    "foobar/barfoo/baz": "/assets/foobar/barfoo/baz-7079be.js",
    "foobar/barfoo": "/assets/foobar/barfoo/index-83fecf.js"
  }
}

또는 중첩된 폴더를 다른 이름으로 고정하려면 다음과 같이 하십시오.

pin_all_from "app/javascript/foobar/barfoo", under: "barfoo/foobar", to: "foobar/barfoo"

foobar/의 중첩된 폴더 barfoo/의 전체 트리를 다시 매핑합니다.

{
  "imports": {
    "barfoo/foobar/bar": "/assets/foobar/barfoo/bar-07689a.js",
    "barfoo/foobar/baz": "/assets/foobar/barfoo/baz-486f9d.js",
    "barfoo/foobar": "/assets/foobar/barfoo/index-e9a30c.js"
  }
}

그러나 다른 누드 모듈 설명부호 아래.foobar/에서만 pin 또는 pin_all_from을 사용하는 방법은 부족하다.보기의 config/importmap.rb 태그에서 javascript_importmap_tags 보기 도움말 메서드를 호출해야 합니다.

<head>
  <%= javascript_importmap_tags %>
</head>

이것은 브라우저가 참고할 수 있도록 생성된 가져오기 지도를 실제로 삽입합니다.<head>과 pin은 모두 pin_all_from이라는 선택적 매개 변수를 받아들인다. :preload으로 설정하면 이 매개 변수는 실제 가져오기 맵을 배치하기 전에 true이 있는 <link> 표시를 추가한다.

<head>
  <link rel="modulepreload" href="/assets/baz/foobar.js">

  <script type="importmap">
    {
      "imports": {
        "...": "..."
      }
    }
  </script>
</head>

따라서 브라우저는 다른 모듈에서 파일을 가져오기 전에 유휴 시간을 이용하여 파일을 다운로드할 수 있습니다(Es 모듈이 있음).

면책 성명
Rails 7은 이 블로그를 작성할 때 아직 완전히 게시되지 않았습니다.그래서 지도 가져오기에 대한 많은 공공 API가 바뀔 수 있습니다.그러니 이런 변화에 유의하세요.

도구책

WICG / import-maps

Import maps - HTTP 203

rails / importmap-rails

Alpha preview: Modern JavaScript in Rails 7 without Webpack