Vite로 변환(3부)

이 시리즈의 3부에서는 Vite에서 Open Sauced project용으로 다양한 플러그인을 사용하는 방법에 대해 설명합니다. Vite는 Plugin API을 기반으로 Rollup 형식으로 확장성을 제공합니다. Vite가 어떤 롤업 플러그인과 호환되는지(그리고 어느 정도까지)에 대한 참조는 Vite Rollup Plugins을 참조하십시오.

우리가 종속성을 재정렬할 수 있고 Vite가 가장 단순한 경우(ESM을 지원하는 브라우저에서 프로덕션 빌드)에 대해 모든 것을 올바르게 빌드할 수 있게 되면 도구 기능 패리티를 Webpack으로 복원하는 데 초점을 옮겼습니다. (또는 적어도 우리가 신경 쓴 부분). 솔직히 이것들은 개인적으로 친숙하지 않은 것들이었기 때문에 Vite 플러그인 구성의 대부분은 . 즉, 내가 이것에 대해 이야기하는 가장 쉬운 방법은 vite.config.ts 파일의 가져오기 섹션을 참조하는 것입니다.

import ViteReact from '@vitejs/plugin-react'
import ViteEslint from '@nabla/vite-plugin-eslint'
import ViteHtml from 'vite-plugin-html'
import ViteInspect from 'vite-plugin-inspect'
import ViteLegacy from '@vitejs/plugin-legacy'
import { VitePWA, VitePWAOptions } from 'vite-plugin-pwa'
import ViteReplace from '@rollup/plugin-replace'
import ViteTimeReporter from 'vite-plugin-time-reporter'
import ViteVisualizer from 'rollup-plugin-visualizer'

짐작할 수 있듯이 @vitejs/plugin-react 플러그인은 일반적으로 Vite에서 빌드하도록 Open Sauced를 가져오는 가장 직접적인 책임이 있는 플러그인입니다.

Open Sauced 프로젝트에서 eslint을 사용하며 Webpack 빌드 단계의 일부였습니다. 이에 대한 기능 패리티에 도달하기 위해 @nabla/vite-plugin-eslint 을 사용했습니다. 플러그인의 NPM 페이지에서 언급했듯이 "HMR을 빠르게 유지합니다. Linting은 비동기식으로 수행되며 변환 프로세스를 차단하지 않습니다."

ViteHtml 플러그인을 사용하여 앱 버전을 페이지 제목에 삽입합니다. 사실 이것은 원래 빌드 프로세스의 일부가 아니었지만 지금은 마음에 듭니다!

Vite 최적화에서 개발 목적으로 ViteInspect 플러그인을 사용합니다. 이 플러그인을 사용하면 다양한 Vite 플러그인의 상태를 관찰할 수 있습니다.

ViteLegacy 플러그인은 ES 모듈을 지원하지 않는 브라우저를 대상으로 사용하는 플러그인입니다.

Vite PWA 플러그인은 2부에서 언급한 플러그인입니다. 기존 PWA 구현을 작동시키기 위해 약간의 노력을 기울였으며 대신 이 플러그인을 사용하기로 결정했습니다.

롤업과 동일한 효과적인 플러그인 API를 지원하는 사용 사례를 증명하기 위해 @rollup/plugin-replace을 사용하여 Netlify 빌드 날짜를 푸터 반응 구성 요소에 삽입하고 있습니다.

허영 메트릭의 경우 빌드 시간을 자랑하기 위해 vite-plugin-time-reporter을 사용합니다.

Rollup 플러그인 호환성의 또 다른 쇼케이스(그리고 이것은 내가 가장 좋아하는 것)에서 rollup-plugin-visualizer을 사용하고 있습니다.

일부 플러그인은 무조건 로드되고 다른 플러그인은 빌드 컨텍스트를 기반으로 로드됩니다(이 부분에 대해서는 4부에서 자세히 설명하겠습니다). 아래는 vite.config.ts의 스니펫입니다.

config.plugins.push(
  ViteTimeReporter(),
  ViteEslint(),
  ViteInspect(),
  ViteReact({
    fastRefresh: !isTest,
    // Exclude storybook stories
    exclude: /\.stories\.(t|j)sx?$/,
    // Only .jsx files
    include: "**/*.jsx",
    babel: {
      plugins: [
        [
          'babel-plugin-styled-components',
          {
            displayName: true,
            fileName: false
          }
        ]
      ]
    }
  }),
  ViteHtml({
    minify: isProd && isBuild,
    inject: {
      data: {
        title: `Open Sauced v${process.env.npm_package_version}`,
      },
    },
  })
);

다음은 조건부 적용에 사용되는 일부 코드의 일부입니다.

isBuild && isLegacy && config.plugins.push(
  ViteLegacy({
    targets: [
      'defaults',
      'not IE 11'
    ]
  })
);

isReport && config.plugins.push(
  ViteVisualizer({
    filename: "./build/bundle.html",
    open: true,
    gzipSize: true
  })
);

Vite(또는 Rollup)용 플러그인 중 가장 좋아하는 플러그인이 무엇인지 의견을 듣고 싶습니다!

Nathan Watson에 Unsplash의 사진