Computer >> 컴퓨터 >  >> 프로그램 작성 >> Ruby

Ruby on Rails 애플리케이션에서 Webpacker 사용 — 심층 분석

인터넷 시대가 시작될 때 웹 사이트는 훨씬 단순했고 상호 작용이 많지 않았습니다. 기술, 장치 및 프로그래밍 언어의 발전으로 인해 이미지 및 CSS 스타일시트와 같은 자산을 포함하여 여러 파일로 구성되어 더욱 복잡해졌습니다.

웹사이트가 더 인터랙티브할수록 더 많은 JavaScript 코드를 사용해야 합니다. 이러한 코드를 사용하려면 스크립트 태그를 사용하여 모든 HTML 코드 파일을 포함해야 합니다. 이러한 접근 방식은 모든 단일 파일을 포함하고 올바른 순서를 유지해야 한다는 것을 기억해야 하기 때문에 오류가 발생하기 쉽습니다. 그렇지 않으면 코드가 작동하지 않을 수 있습니다. Webpack 도구를 사용하면 이러한 문제가 사라집니다. Webpacker는 Webpack과 Rails 애플리케이션 사이의 다리입니다.

이 기사에서는 Webpacker를 자세히 살펴보고 이 도구가 내부적으로 어떻게 작동하는지 이해할 수 있도록 자세한 설명을 제공합니다. 콘텐츠를 최대한 가치 있게 만들기 위해 다음 섹션으로 나누기로 결정했습니다.

  • 개괄적인 개요 — 심층 분석을 하기 전에 Webpack과 Webpacker에 대한 높은 수준의 개요를 설명하겠습니다. 고급 주제에 대한 준비로 간주할 수 있습니다.
  • 구조 설명 — 여러 파일을 탐색할 것이므로 특정 구조가 사용된 이유와 일반적인 목적에 어떻게 반응하는지 아는 것이 좋습니다.
  • 해부학 설명 — 이 부분은 Webpack 설정의 가장 중요한 파일에 대한 조사를 다룹니다. 작동 방식을 아는 것은 효과적이고 번거롭지 않은 개발 프로세스에 필수적입니다.
  • 환경별 설정 — 마지막 부분에서는 Webpacker가 개발 및 프로덕션 환경에서 어떻게 작동하는지 설명합니다.

이 기사를 읽고 나면 Webpack과 Webpacker가 무엇이고 우리가 Rails 애플리케이션에 왜 필요한지 알게 될 것입니다. Webpacker의 내부에 대해 자세히 알아보면 도구가 Webpack과 연결되는 방식 및 Rails 애플리케이션과 통신하는 방식을 이해하는 데 도움이 됩니다.

다이빙 전

깊은 물에 나가기 전에 먼저 준비해야 합니다. 개략적인 개요는 내부에 깊이 들어가지 않고도 주어진 도구의 목적과 해결하는 문제를 이해하는 데 도움이 되므로 모든 기술로 작업을 시작하는 좋은 방법입니다.

웹팩

나는 이미 Webpack이 JavaScript 파일 코드를 구성하여 오류를 피하고 웹사이트의 성능을 향상시키는 데 도움이 된다고 언급했습니다. 코드를 번들로 구성합니다.

번들은 처음 생성된 종속성 그래프에 따라 여러 모듈이 지능적으로 배치된 파일입니다. 이 프로세스 덕분에 코드가 예상대로 작동하고 주어진 라이브러리의 코드를 호출하기 전에 로드되었음을 확신할 수 있습니다.

Webpack은 최신 버전의 Rails에서 기본적으로 사용되는 유일한 도구가 아닙니다. 프로젝트가 생성되면 Babel 및 PostCSS에 대한 구성 파일도 생성됩니다. PostCSS는 JavaScript로 CSS를 변환하는 도구이고 Babel은 브라우저 지원에 대해 걱정하지 않고 최신 JavaScript를 작성할 수 있게 해주는 JavaScript 컴파일러입니다.

웹패커

Webpacker는 Webpack을 Rails 애플리케이션과 통합하는 도구입니다. JavaScript와 유사한 애플리케이션을 쉽게 구성 및 개발하고 프로덕션 환경에 맞게 최적화할 수 있습니다.

소스 코드는 보석으로 사용할 수 있으며 라이브러리에는 JavaScript 파일에 도입된 변경 사항을 보기 위해 서버를 중지했다가 시작할 필요가 없기 때문에 앱 개발을 매우 빠르게 만드는 개발 서버가 함께 제공됩니다.

심각한 몰입

Webpack이 생성된 이유와 Webpacker가 Rails 애플리케이션에서 어떤 역할을 하는지 알았으므로 Webpacker의 내부에 집중하여 Webpack이 어떻게 파일을 구성하고 개발 프로세스를 가속화하며 프로덕션 환경에 맞게 파일을 최적화하는지 알아볼 수 있습니다.

Webpacker는 최신 버전의 Rails에서 즉시 사용할 수 있습니다. 새 프로젝트를 생성하기 전에 webpacker:install 노드 버전이 10.17.0 이상인지 확인하십시오. 명령은 rails new 명령과 함께 자동으로 호출됩니다.

웹패커 파일 구조

설치 명령이 실행된 후 다음 파일이 생성됩니다.

  • config/webpacker.yml — 특정 환경에 대한 기본 구성 및 구성이 포함된 기본 구성 파일
  • config/webpacker/ — 특정 환경에 대한 JavaScript 구성 파일이 생성되는 디렉토리
  • bin/webpack — 번들을 생성하기 위해 webpack을 호출하는 실행 파일
  • bin/webpack-dev-server — 번들에 포함된 JavaScript 파일 내에서 변경할 때마다 웹팩을 다시 로드하는 개발 서버를 시작하는 실행 파일

구성 파일의 구조

Webpacker의 기본 구성 파일은 config 디렉토리 아래에 있으며 webpacker.yml이라는 이름이 지정됩니다. . Webpacker와 달리 Webpack에 대한 설정은 config/webpack 아래에 환경별로 따로 저장됩니다. 디렉토리.

웹패커

기본적으로 구성 파일에는 기본 항목과 특정 설정을 덮어쓸 수 있는 각 환경에 대한 섹션 등 많은 항목이 포함되어 있습니다. 가장 중요한 설정을 살펴보겠습니다.

  • source_path — 애플리케이션에 있는 자바스크립트 파일의 기본 소스입니다. app/javascript로 설정됩니다. 기본적으로 이 값을 변경할 필요가 없습니다.
  • source_entry_path — 팩 파일을 보관하는 source_path 아래의 디렉토리 이름(진입점이라고도 함). 기본적으로 이 설정은 팩의 디렉토리로 설정됩니다.
  • public_root_path — 브라우저에서 액세스할 수 있는 응용 프로그램의 디렉터리 경로입니다. 일반적인 Rails 애플리케이션에서는 공개 디렉토리입니다.
  • public_output_path — Webpacker가 파일을 컴파일할 때 이 디렉토리의 모든 컴파일된 파일을 public_root_path 아래에 넣습니다. . 기본적으로 디렉토리 이름은 packs이지만 원하는 대로 이름을 지정할 수 있습니다.
  • webpack_compile_output — 플래그가 true로 설정되면 파일이 컴파일될 때 출력 메시지가 표시됩니다. 컴파일이 실패할 때 이를 인지하고 조치를 취할 수 있으므로 유용합니다.

개발 섹션에는 서버를 다시 시작할 필요 없이 개발 환경에서 파일을 컴파일하는 데 사용되는 개발 서버에 대한 구성도 포함되어 있다는 점을 언급할 가치가 있습니다.

레일스 콘솔 또는 코드 수준에서 구성에 액세스하려면 Webpacker.manifest.config를 호출할 수 있습니다. , 구성 클래스 인스턴스를 반환합니다.

웹팩

각 환경에는 구성 파일이 있지만 모든 파일에서 기본 환경 파일을 가져옵니다. config/webpack/environment.js . 환경 설정 파일에는 Webpack의 기본 동작을 수정할 커스텀 플러그인을 로드하는 곳이 있습니다. 파일 컴파일을 위한 사용자 지정 규칙을 추가할 수도 있습니다.

팩 파일의 구조

팩은 app/javascript/packs 아래에 있습니다. 예배 규칙서. 각 팩 파일은 컴파일 프로세스가 시작될 때 Webpacker에서 진입점으로 처리됩니다.

기본 팩 파일

새 Rails 프로젝트를 생성하면 application.js라는 기본 팩 파일이 다음 내용으로 생성됩니다.

import Rails from "@rails/ujs";
import Turbolinks from "turbolinks";
import * as ActiveStorage from "@rails/activestorage";
import "channels";
 
Rails.start();
Turbolinks.start();
ActiveStorage.start();

보시다시피 첫 번째 단계는 주어진 라이브러리를 가져온 다음 필요할 때 초기화 메서드를 호출하는 것입니다. import를 호출하면 시스템은 주어진 노드 모듈이나 로컬 라이브러리를 검색합니다. 표준 접근 방식을 사용하면 스크립트 태그를 사용하여 페이지 소스에 포함할 때 초기화되므로 라이브러리를 명시적으로 초기화할 필요가 없습니다.

팩 파일의 우수 사례

일반 JavaScript 코드를 팩 파일에 넣어 실행할 수 있지만 JavaScript 코드를 팩 파일에 보관하는 것은 권장하지 않습니다. 가장 좋은 방법은 파일을 깨끗하게 유지하고 여기에서 라이브러리만 가져오고 초기화하고 다른 논리는 packs 디렉토리 외부에 유지하는 것입니다.

응용 프로그램에 팩 파일 포함

팩 파일은 웹사이트 소스에 자동으로 포함되지 않습니다. 자산 파이프라인의 경우와 마찬가지로 뷰 내부에 특수 태그를 사용해야 합니다.

<%= javascript_packs_with_chunks_tag 'application' %>

이 방법은 어떻게 작동합니까? 내부적으로 config/webpacker.yml에 넣은 데이터를 보관하는 Webpacker 구성을 호출합니다. 파일. 진입점 디렉토리 내에서 application.js 파일을 찾습니다. 이 경우 app/javascript/packs입니다. . 다음 코드를 호출하여 확인할 수 있습니다.

Webpacker.manifest.config.source_entry_path

항목이 발견되면 Webpacker는 javascript_include_tag를 호출합니다. 메소드, ActionView의 도우미 Rails에서 기본적으로 사용할 수 있는 라이브러리입니다. 이 메서드는 하나 이상의 소스를 허용하고 보기에 바로 적용할 수 있는 스크립트 태그를 반환합니다.

개발 서버

Webpacker 개발 서버의 진입점은 bin 안에 있는 실행 파일입니다. 폴더 및 이름이 webpack-dev-server . 서버 실행 프로세스는 5단계로 구성됩니다.

  • 환경 설정 — Node 및 Rails의 환경 이름이 설정되었습니다. 환경이 지정되지 않은 경우 프로그램은 서버가 개발 환경에서 실행된다고 가정합니다.
  • 구성 로드 중 — 파일 config/webpacker.yml 이전 단계에서 설정한 환경에 대한 설정이 로드됩니다.
  • 명령 옵션 확인 — 프로그램은 서버 명령에 적절한 옵션을 전달했는지 확인합니다. 예를 들어 --https 옵션이 제공되지만 config/webpacker.yml에서 지정하지 않았습니다. 파일.
  • 포트 가용성 확인 — 프로그램은 주어진 포트를 사용할 수 있는지 확인합니다. 다른 프로그램이 이미 그것을 사용하고 있다면 config/webpacker.yml 내에서 웹팩 서버 설정을 업데이트해야 한다는 오류를 던질 것입니다. 파일.
  • webpack 제공 명령 실행 — 노드 모듈 디렉토리가 존재하면 프로그램은 디렉토리 내에서 명령을 실행하고, 그렇지 않으면 yarn으로 실행합니다. 프로그램은 config/webpack/ 내부에 있는 파일 중 하나를 가리키는 명령에 구성 옵션을 전달합니다. 디렉토리.

이제 서버가 실행 중이고 즉시 코드를 컴파일하므로 변경 사항을 확인하고 웹팩이 새 코드로 번들을 생성할 수 있는지 확인하기 위해 서버를 다시 시작할 필요가 없습니다.

개발 서버의 코드는 매우 간단합니다. YAML 형식의 구성 파일에서만 구성을 로드하고 JavaScript 형식의 적절한 구성을 webpack serve에 직접 전달합니다. 명령. 직접 실행할 수도 있지만 기본 제공 명령으로 적절한 명령 인수를 처리할 필요가 없습니다.

프로덕션 환경을 위한 파일 컴파일

webpacker를 사용하는 애플리케이션을 배포한다고 가정합니다. 이 경우 assets:precompile를 호출하기만 하면 됩니다. Webpacker가 작업을 자동으로 연결하므로 작업 webpacker:compile 그것에.

webpacker:compile은 어떻게 후드 아래에서 작업? 파헤쳐 보겠습니다. 다음 작업을 수행합니다.

  • 메인 호출을 두 블록으로 래핑하여 NODE 환경이 설정되고 Webpacker 로그가 표준 출력으로 출력됩니다.
  • Webpack을 호출한 다음 로그를 구문 분석하여 작업의 성공 여부를 결정합니다.

이제 public/packs/js를 방문할 수 있습니다. 컴파일된 파일을 볼 수 있는 디렉토리. 서버에 배포해야 합니다.

요약

Webpacker가 내부에서 어떻게 작동하는지 방금 배웠습니다. Ruby로 Webpack을 구성하고 애플리케이션 내에서 쉽게 자바스크립트 코드를 사용할 수 있도록 하는 Webpack 라이브러리와 Rails 애플리케이션 간의 브리지로 취급할 수 있습니다.

전체 기사를 요약하기 위해 Webpacker의 주요 요소를 다시 상기해 보겠습니다.

  • 구성 — config/webpacker.yml 안에 있습니다. 파일을 만들고 자바스크립트 파일과 팩을 보관할 디렉토리를 Webpacker에 지정할 수 있습니다.
  • Pack — Webpacker가 컴파일을 시작하는 단일 진입점입니다. 해당 파일에서 가져오고 초기화된 각 라이브러리는 자동으로 컴파일됩니다.
  • 개발 서버 — 파일을 즉석에서 컴파일할 수 있는 간단한 스크립트이므로 JavaScript 파일을 수정할 때마다 서버를 다시 시작할 필요가 없습니다.
  • 컴파일 작업 — Webpack을 호출하고 공개 디렉토리에서 파일을 컴파일하여 프로덕션 서버에 배포하고 최종 사용자가 사용할 수 있도록 하는 간단한 레이크 작업
  • 보기 도우미 — 보기 안에 컴파일된 파일을 포함할 수 있는 도우미

경험이 많지 않은 많은 개발자에게 Wepacker는 약간 마법처럼 보이지만 실제로는 Webpack을 Ruby 방식으로 사용하는 데 도움이 되는 간단한 라이브러리입니다.

추신 Ruby Magic 게시물이 언론에 공개되는 즉시 읽고 싶다면 Ruby Magic 뉴스레터를 구독하고 게시물을 놓치지 마세요!