Vite로 polyfill을 추가하는 방법

원래 Parcel2를 사용했지만, 자체 프로젝트에서 리액트의 레이지 import을 하면 HMR이 작동하지 않고 바이트도 신경 쓰여 옮기기로 했다.
파클에서도 폴리필이 자동으로 추가되기 때문에 신경 쓰지 않았지만, 바이트는 스스로 추가해야 할 것 같았다.
나의 경우 브라우저에서 csv-parse라는 프로그램 라이브러리를 사용했고 내부에서 stream와process 등을 참조했다.
우선, esbuild의polyfill을 추가하는 플러그인이 필요합니다.@esbuild-plugins/node-globals-polyfill , @esbuild-plugins/node-modules-polyfill

yarn add --dev @esbuild-plugins/node-globals-polyfill @esbuild-plugins/node-modules-polyfill

Vite의config와 연결하면 Polyfill이 됩니다.
vite.config.ts

/* eslint-disable import/no-extraneous-dependencies */
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill'
import * as path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      'src/': path.join(__dirname, 'src/'),
      stream: 'rollup-plugin-node-polyfills/polyfills/stream',
      _stream_duplex: 'rollup-plugin-node-polyfills/polyfills/readable-stream/duplex',
      _stream_passthrough: 'rollup-plugin-node-polyfills/polyfills/readable-stream/passthrough',
      _stream_readable: 'rollup-plugin-node-polyfills/polyfills/readable-stream/readable',
      _stream_writable: 'rollup-plugin-node-polyfills/polyfills/readable-stream/writable',
      _stream_transform: 'rollup-plugin-node-polyfills/polyfills/readable-stream/transform'
    }
  },
  optimizeDeps: {
    esbuildOptions: {
      define: {
        global: 'globalThis'
      },
      // Enable esbuild polyfill plugins
      // https://medium.com/@ftaioli/using-node-js-builtin-modules-with-vite-6194737c2cd2
      plugins: [
        NodeGlobalsPolyfillPlugin({
          process: true,
          buffer: true
        })
      ]
    }
  },
  build: {
    target: 'esnext'
  }
})

이 글은 매우 참고 가치가 있다.다른 polyfill을 추가하려면 다음과 같은 내용을 참고할 수 있습니다.
https://medium.com/@ftaioli/using-node-js-builtin-modules-with-vite-6194737c2cd2
하지만 내 경우는 이것뿐만이 아니라 추가Buffer가 필요하다.
Buffer의 polyfill, vite를 추가할 수 있습니다.config.ts가 아니라 코드에 직접 추가해야 합니다.
최상위 레벨 파일로 가져와서 해결합니다.
polyfill.ts

import { Buffer } from 'buffer'

// for csv-parse polyfill
// https://github.com/vitejs/vite/discussions/2785
globalThis.Buffer = Buffer

https://github.com/vitejs/vite/discussions/2785