Rails 6에 커스텀 자바스크립트 추가하기

8491 단어 railsjavascript
Rails 6에서 JavaScript 자산은 더 이상 app/assets/ 디렉토리에 포함되지 않고 대신 Webpacker에서 처리하는 별도의 디렉토리app/javascript로 이동되었습니다. 훌륭하긴 한데, 나만의 맞춤 자바스크립트를 추가하고 싶을 때 어떻게 해야 하는지를 설명하는 명확한 문서가 없었습니다.

몇 가지 실험을 하고 인터넷을 뒤져본 결과 작동하는 것으로 보이는 몇 가지 방법이 있습니다. 저는 자바스크립트 전문가가 아니므로 더 나은 방법이 있거나 제가 놓치고 있는 다른 방법이 있으면 댓글로 알려주세요!

방법 1: 사용자 지정 디렉터리를 만들고 application.js에 요구


application.js 를 보면 맨 위에 있는 주석은 "실제 애플리케이션 논리를 app/javascript 내의 관련 구조에 배치하고 이 팩 파일만 사용하여 해당 코드를 참조하여 컴파일되도록 하십시오"라고 제안합니다.

// app/javascript/packs/application.js

// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

app/javascript/ 내에 사용자 정의 디렉토리를 추가하여 이를 설정할 수 있습니다. custom/ , application.js 내의 파일이 필요합니다.

예를 들어 home.js 디렉토리에 app/javascript/custom/라는 자바스크립트 파일이 있는 경우 require()로 로드할 수 있습니다.

// app/javascript/packs/application.js

// ...

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

require("custom/home")

application.js 에 필요하므로 사용자 정의 자바스크립트는 다른 모든 자바스크립트와 함께 application.js 와 같은 타임스탬프가 찍힌 application-a03d1868c0a3f825e53e.js 파일로 컴파일됩니다.

이것은 새로운 Rails 앱을 만들 때 자동으로 생성되는 <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> 의 app/views/layouts/application.html.erb 태그에 의해 로드됩니다.

깔끔한 모양을 위해 자바스크립트 파일index.js의 이름을 지정하고 require("custom")와 같은 디렉토리에 대한 간단한 참조로 파일을 요구할 수도 있습니다. require()는 디렉토리에 대한 경로가 제공될 때(있는 경우 아니요index.js이면 실패합니다).

방법 2: index.js 디렉토리에 사용자 정의 JavaScript 추가



어떤 이유로 다른 디렉토리를 만들고 싶지 않다면 app/javascript/packs 디렉토리 내에 사용자 정의 자바스크립트 파일을 추가하도록 선택할 수 있습니다. 그런 다음 app/javascript/packs 및 application.js 의 파일이 필요합니다.

예를 들어, require() 에 custom.js 라는 파일이 있는 경우 아래와 같이 요구하면 다른 모든 자바스크립트와 함께 타임스탬프가 지정된 app/javascript/packs 파일로 컴파일됩니다.

// app/javascript/packs/application.js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

require("packs/custom")


방법 3: 별도의 JavaScript 파일(팩)에 application.js 사용



사용자 정의 자바스크립트가 다른 모든 것과 함께 javascript_pack_tag로 컴파일되는 것을 원하지 않으면 Rails가 이를 별도의 파일 또는 "팩"으로 컴파일하도록 할 수 있습니다.

이렇게 하려면 application.js 내에 사용자 정의 파일을 추가하십시오. app/javascript/packs , 다음과 같이 보기에서 파일이 필요한 곳에 custom.js 도우미를 사용하십시오. javascript_pack_tag
사용자 정의 자바스크립트는 자바스크립트의 나머지 부분과 별도로 다음과 같은 타임스탬프<%= javascript_pack_tag 'custom' %>로 컴파일됩니다. custom.jscustom-a03d1756c0a3f825e53e.js 의 끝 body 태그 바로 앞에 맞춤 자바스크립트를 추가한 경우 다음과 같이 표시됩니다.

# app/layouts/views/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>My App</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body class="<%= controller_name %> <%= action_name %>">
    <%= render 'layouts/header' %>

    <%= yield %>

    <%= render 'layouts/footer' %>

    <%= javascript_pack_tag 'custom' %>
  </body>
</html>


읽어 주셔서 감사합니다!
파이썬의 .format ⚙
개인용 및 회사용 github 계정을 통합한 이야기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage