Vite와 함께 감정 사용하기

Vite은 모두가 이야기하는 멋진 다음 제품입니다. 초보자를 위해 개발 서버에 매우 빠른 새로 고침(HMR) 속도를 제공하고 고도로 최적화된 빌드를 생성하기 위한 롤업 모듈 번들러가 로드되는 도구입니다.

Vite 2.0 발표

Evan You ・ 2월 16일 ・ 4분 읽기

#javascript #webdev #vite

여러분 대부분은 이미 매우 유명한 CSS-in-JS 라이브러리인 EmotionJs에 익숙할 것입니다. 반응 구성 요소에서 스타일 작성의 전반적인 개발자 경험을 크게 향상시키는 css 소품을 제공하는 반응 풍미와 함께 제공됩니다.


공무원의 예docs

그러나 이 매우 편리한 CSS 소품을 사용해야 할 때마다 우리는 jsx 구성 요소 맨 위에 감정의 사용자 정의 JSX pragma를 추가해야 합니다.

/** @jsx jsx */
import { jsx } from '@emotion/react'

Vite에 기회를 줄 계획이라면 - 좋은 소식은 추가적인 손질을 할 필요가 없다는 것입니다. 위의 접근 방식을 사용할 때 감정이 중단 없이 작동합니다. 그러나 훨씬 더 좋은 방법이 있습니다. 이 방법을 사용하면 모든 JSX 파일에서 이 가져오기 덩어리를 가져오는 것을 피할 수 있습니다.

그렇게 하려면 프로젝트의 esbuild 파일에서 vite.config 옵션을 업데이트해야 합니다.

import { defineConfig } from 'vite';


// https://vitejs.dev/config/

export default defineConfig({
   plugins: [...],
   esbuild: {
     jsxFactory: `jsx`,
     jsxInject: `import { jsx } from '@emotion/react'`,
   }
   ...
});

Vite는 컴파일을 위해 내부적으로 esbuild을 사용합니다.

jsxInject esbuild의 --inject 변환 옵션을 설정하기만 하면 모든 .jsx 파일에서 제공된 모듈을 자동으로 가져옵니다.

jsxFactory는 기본값React.creatElement을 감정s jsx의 공장 함수로 재정의합니다.

그리고 그게 다야. 이제 기본적으로 모든 jsx 구성 요소에서 감정을 사용할 수 있습니다.

원하는 경우 css와 함께 jsx 함수를 가져와서 직렬화된 스타일 개체를 구성하기 위해 나중에 구성 요소에서 가져오는 것을 방지할 수도 있습니다.

jsxInject: `import {jsx, css} from '@emotion/react'`