webpack에서 vite로 마이그레이션

 

이 프로젝트를 webpack에서 vite로 마이그레이션했다.

 

1. 빈 vite 만들고 필요한 것 복붙

https://tech.cloudmt.co.kr/2023/02/23/build-fast-webpack-to-vite-migratiokn/

번들러 마이그레이션(Webpack to Vite)으로 빌드 속도 높이기

위 글이면 왠만한건 다 해결된다.

3. index.html은 root로 옮기기

localhost:3000을 켰는데 아무것도 되지 않았다.

cra에서는 index.html을 public폴더에 만들지만, vite에서는 index.html이 root에 있어야 한다.

vite.config.js에서 설정하면 되긴 한데, 그냥 index.html을 root로 옮겨주었다.

4. index.html에 <%= blah %> 구문 지우기

[vite] Internal server error: URI malformed 에러가 뜬다.

 

 <!-- before -->
 <link rel="icon" href="%PUBLIC_URL%/hiviliage.ico" />
 
 <!-- after --> 
 <link rel="icon" href="%PUBLIC_URL%/hiviliage.ico" />

참고 : https://velog.io/@aiden-goo/vite-Internal-server-error-URI-malformed

5. process.env -> import.meta.env 로 변경

process.env를 import.meta.env로 변경해주어야 한다.

참고: https://ko.vitejs.dev/guide/env-and-mode.html#env-variables-and-modes

Vite

tsconfig.json 변경

moduleResolution을 node에서 bundler로 변경해주었다.

관련된 정보는 이 글, 이 글2에 잘 나와있다.

 

이유는 잘 모르겠지만, tsconfig.json에서 에러가 났다.

tsconfig.json(10,25): error TS6046: Argument for '--moduleResolution' option must be: 'node', 'classic', 'node16', 'nodenext'.
tsconfig.json(11,5): error TS5023: Unknown compiler option 'allowImportingTsExtensions'.
tsconfig.json(12,5): error TS5070: Option '--resolveJsonModule' cannot be specified without 'node' module resolution strategy.

 

이유는 typescript 버전때문. typescript를 최신버전으로 바꿔주니 문제가 해결되었다.

 

가만보니 이건 vite관련 옵션이 아니라 typescript 관련 옵션인듯 하다.

vitest 설치

상단에 /// <reference types="vitest" /> 를 추가해줘야 test 속성에서 에러가 나지 않는다.

/// <reference types="vitest" />
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';
import svgr from 'vite-plugin-svgr';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), svgr()],
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './src/setupTests.ts'
  },
  server: {
    port: 3000
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
});

 

그리고 vite는 바이트가 아니라 비트라고한다..