[Vite] CRA에서 Vite로 변환하기

[bluelion2]

✨ What?
발견된 이슈 간단히 정리하기

사내에서 쓰는 CRA + CRACO를 Vite로 변환하기

• 업무 시간이 살짝 붕 떠서, 빌드 속도가 느려서, 커스텀하게 건드리기 어려워서, 다른걸 써보고 싶은 욕구 등등의 이유로 변환 시작

📚 캡쳐한 사진들

[bluelion2]

진행

• index.html, manifest.json root로 이동
• vite.config.js 생성 및 기본옵션 정의
  • yarn create vite test --template react-ts 로 생성한 기본 옵션 참고

[bluelion2]

이슈1

내부에서 쓰는 mqtt라이브러리에서 이슈 발생

• buffer is not defined

기존 craco 옵션을 보니 webpack에서 polyfill 옵션 적용 확인함.

[bluelion2]

vite dev 환경은 내부적으로 esbuild를 이용해서 빌드함.

esbuild옵션을 줄 수 있는데, 거기서 polyfill 적용함으로써 mqtt를 사용함.

optimizeDeps: {
    esbuildOptions: {
      define: {
        global: 'globalThis',
      },
      plugins: [
        // mqtt를 위한 buffer, process polyfill
        NodeGlobalsPolyfillPlugin({
          buffer: true,
          process: true,
        }),
      ],
    },
  },

• rollup과 esbuild의 역할

참고

• https://intrepidgeeks.com/tutorial/to-add-padding-to-vite
• https://ui.toast.com/weekly-pick/ko_20220127#vite
• https://engineering.ab180.co/stories/webpack-to-vite

---

추가

• Esbuild상에 이슈일 뿐, vite가 production 빌드하는데 쓰이는 rollup에서는 이슈가 발생하지 않음 -> esBuild 제거
• Vite에서 production build에 esbuild를 안쓰기 떄문에 무시
• 추가적인 rollup 옵션 변환은 rollupOption을 수정하기.

참고

• https://vitejs-kr.github.io/guide/why.html#why-bundle-for-production

[bluelion2]

img file 경로 이동

• /public/assets 하위에 있던 이미지들을 /public/images로 이동함.
• vite 기본 img 경로가 /public/images 셋팅이기에 + assets에서 분리하서 관리하고자 config에서 변경하는거보다 그냥 옮김
  • TODO - img를 s3로 이동시키기

[bluelion2]

rollup-plugin-visualizer를 통해서 결과물 사이즈 측정하기

import { visualizer } from 'rollup-plugin-visualizer'


export default defineConfig({
  plugins: [
    react({
      // Emotion css
      jsxImportSource: '@emotion/react',
      babel: {
        plugins: ['@emotion/babel-plugin'],
      },
    }),
    // 빌드할 때마다 file을 생성함.   
    visualizer({
       file: 'bundle.html',
    }),
   ..... 
  ]

[bluelion2]

참고 링크

• https://vitejs-kr.github.io/guide/
• https://engineering.ab180.co/stories/webpack-to-vite
• https://ui.toast.com/weekly-pick/ko_20220127#vite
• https://intrepidgeeks.com/tutorial/to-add-padding-to-vite
• https://rollupjs.org/guide/en/
• https://github.com/btd/rollup-plugin-visualizer
• https://velog.io/@katanazero86/Typescript-%EC%97%90%EC%84%9C-import.meta-%EC%82%AC%EC%9A%A9%EB%B2%95

[bluelion2]

process.env is not defined Issue

vite에서는 porcess.env를 그냥 쓸 수는 없음.
vite.config.js에서 define 옵션에서 수정해주거나, import.meta.env 로 사용해야함.

console.log(import.meta.env)를 찍을 때 - (import.meta.url 무시)

---

추가

• import.meta : https://github.com/tc39/proposal-import-meta

[bluelion2]

Vite - Storybook 셋팅 변경

참고

• Using the css Prop of @emotion/react and apply babel plugin storybookjs/builder-vite#210 (comment)
• https://www.npmjs.com/package/@storybook/builder-vite