Rails 7에서 Javascript를 쉽게 관리

Rails 7이 여기에 있으며 "UJS with import maps plus Turbo and Stimulus from Hotwire as the defaults"을 사용하여 Javscript를 관리하는 완전히 새로운 방법이 제공됩니다.

나는 꽤 경험이 풍부한 개발자이지만 이러한 개념과 씨름하는 데 어려움을 겪었고 가능한 한 빨리 배송되고 문 밖으로 나가고 싶었던 매우 짧은 그린 필드 프로젝트가 있었다는 것을 인정해야 합니다.

나는 Rails 6과 Webpacker에서 익숙했던 것을 미러링하는 접근 방식을 원했지만 여전히 새로운 느낌을 주는 것을 사용하면서 출시하자마자 비트로트에 굴복하지 않을 것입니다.

몇 가지 배경 조사와 동료들과의 논의 끝에 결국 JSbundling에 정착했습니다. 이를 통해 나머지 Javascript 세계에 대한 자산 구축에 대한 유사한 접근 방식을 허용하지만 우리가 알고 사랑하는 자산 파이프라인의 마법이 추가되었습니다.

먼저 Gemfile에 jsbundling-rails를 추가합니다.

gem "jsbundling-rails", "~> 1.0"

그리고 달린다bundle install
그런 다음 생성기를 실행합니다(저는 rollup를 사용하고 있습니다. Webpack보다 이해하기가 조금 더 쉽고 전적으로 JS 빌드에 집중되어 있기 때문입니다.)

bin/rails javascript:install:rollup

이렇게 하면 Rails 앱에 다음이 추가됩니다.

An app/assets/builds 폴더 - 여기에는 자산 파이프라인을 통해 제공되는 빌드된 JS가 포함됩니다

.

추가app/javascript/application.js 파일 - 이것은 모든 응용 프로그램의 프런트엔드 Javascript에 대한 진입점입니다

.

A bin/dev 파일 - 개발 중인 응용 프로그램을 실행하는 방법입니다. 서버를 실행하고 즉시 Javsacript를 빌드할 수 있도록Foreman 실행(그리고 없는 경우 선택적으로 설치)합니다

.

A Procfile.dev 파일 - bin/dev 스크립트를 실행할 때 실행할 프로세스를 Foreman에게 알려줍니다.

A rollup.config.js 파일 - 롤업에게 application.js에서 Javascript를 빌드하는 방법을 알려줍니다.

또한 .gitignore에 약간의 추가 비트와 밥을 추가하고(따라서 빌드된 파일을 git에 커밋하지 않음) builds 폴더를 assets/manifest.js 파일에 추가합니다. 또한 package.json에 필요한 종속성과 JS를 빌드하기 위한 NPM 명령을 추가합니다.
bin/dev 로 서버를 시작하면 애플리케이션이 평소처럼 회전하면서 application.js adn rollup.config.js 변경 사항을 확인하고 결과를 빌드합니다.

일부 문제

이것은 주로 방망이에서 나에게 효과가 있었지만 몇 가지 이빨 문제가있었습니다.

먼저 Babel을 사용하여 내 JS가 이전 브라우저와 호환되는지 확인하고 싶었습니다(정부 클라이언트와 작업할 때 여전히 IE11을 지원해야 함). 이것을 rollup.config.js에 추가하면 작동하는 것 같습니다.

import resolve from "@rollup/plugin-node-resolve"
import { babel } from '@rollup/plugin-babel';

export default {
  input: "app/javascript/application.js",
  output: {
    file: "app/assets/builds/application.js",
    format: "es",
    inlineDynamicImports: true,
    sourcemap: true
  },
  plugins: [
    babel({
      babelHelpers: 'runtime',
      exclude: 'node_modules/**',
      presets: [
        [
          '@babel/preset-env', {
            'useBuiltIns': 'usage',
            'corejs': '3'
          }
        ]
      ],
      plugins: ['@babel/plugin-transform-runtime']
    }),
    resolve()
  ]
}

(또한 이것이 작동하려면 @babel/plugin-transform-runtime 및 @babel/runtime를 설치해야 했습니다.)

두 번째로, 각 기능에 대해 별도의 파일을 사용하여 JS를 훌륭하고 모듈식으로 유지하고 각 파일을 import 처리하는 것을 좋아합니다. 이것이 작동하려면 롤업output 형식을 iife(Immediately Invoked Function Expression)로 설정해야 했습니다. 그러면 JS가 로드되는 즉시 실행됩니다. 이제 내 롤업 구성은 다음과 같습니다.

import resolve from '@rollup/plugin-node-resolve'
import commonjs from '@rollup/plugin-commonjs';

import { babel } from '@rollup/plugin-babel';

export default {
  input: 'app/javascript/application.js',
  output: {
    file: 'app/assets/builds/application.js',
    format: 'iife',
    inlineDynamicImports: true,
    sourcemap: true,
  },
  plugins: [
    commonjs(),
    babel({
      babelHelpers: 'runtime',
      exclude: 'node_modules/**',
      presets: [
        [
          '@babel/preset-env', {
            'useBuiltIns': 'usage',
            'corejs': '3'
          }
        ]
      ],
      plugins: ['@babel/plugin-transform-runtime']
    }),
    resolve(),
  ]
}

그리고 그게 다야! 바라건대 이것은 당신이 고통스러운 인터넷 검색 시간을 절약하고 몇 시간 동안 동일한 구성 파일을 응시하는 편두통을 예방할 수 있기를 바랍니다!