티스토리 뷰

프로그래밍/React

react app(webpack, craco) -> vite로 변경하기

쉬피드 2022. 8. 14. 01:59
728x90
반응형

긴말은 필요 없다

vite가 빌드 속도가 빠르기 때문에 변경하면 나중에 코드 유지보수나 작업할때 생산성이 올라간다. 그러므로 장기적인 관점에서 바꾸는 것이 낫다

Package.json

npm install vite -D
npm install @vitejs/plugin-react -D

{
    "scripts": {
        "start": "craco start",
        "build": "craco build"
    }
}

{
    "type": "module", // 하라고는 되어있는데 넣지 않아도 실행은 된다.
    "scripts": {
        "start": "vite start",
        "build": "vite build"
    }
}

로 변경한다

그리고 루트 폴더에 vite.config.ts(js)를 생성한다

vite.config.ts

import { defineConfig  } from "vite";
import react from "@vitejs/plugin-react"

export default defineConfig({
  plugins: [react()],
})

개발시 별다른 웹팩 설정을 하지 않았다면 위처럼 간단하게 써주면 된다.

하지만 env. env.product 등의 환경변수, svg 활용 tsconfig.json에 여러 내용이 있다면 해당 설정파일을 불러 오는 설정을 해주어야 한다

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tsConfigPaths from "vite-tsconfig-paths";
import svgrPlugins from "vite-plugin-svgr";
import EnviromentPlugin from "vite-plugin-envirmentPlugin";
export default defineConfig({
  envPrefix: 'REACT_APP_',  
  server:{
    port: 3000,
  },
  esbuild:{
    logOverride: {'this-is-undefined-in-esm': 'silent'}
  },
  plugins: [
    react(),
    EnviromentPlugin('all'),
    tsConfigPaths(),
    svgrPlugins({
      svgrOptions:{
        icon: true,
      },
    }),
  ],
})

위와 같이 하고, 필요한 라이브러리들을 설치 해준다

npm install vite-tsconfig-paths -D
npm install vite-plugin-svgr -D
npm install vite-plugin-envirmentPlugin -D

그 후 public 폴더에 있는 index.html을 루트 폴더에 옮긴다

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="theme-color" content="#000000" />
    <!--
      manifest.json provides metadata used when your web app is added to the
      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>Craco React App</title>
  </head>

  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

에서 %PUBLIC_URL% 부분을 제거하고 아래에 해당 구문을 추가한다

하게 되면 아래와 같다

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="/manifest.json" />
    <!--
      Notice the use of  in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script type="module" src="/src/index.tsx"></script>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

vite-env.d.ts

위 과정을 마쳤다면 src/vite-env.d.ts를 생성하자

그리고

/// <reference types="vite/client" />

를 입력해주고 저장한다.

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "types": ["vite/client"], // 추가
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ],
  // 추가
  "references": [
    {
      "path": "./tsconfig.node.json"
    }
  ]
}

tsconfig.node.json 생성

{
  "compilerOptions": {
    "composite": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "allowSyntheticDefaultImports": true,
  },
  "include": ["vite.config.ts"]
}

그 후 npm start를 입력하여 실행하면 정상적으로 동작이 된다.

image

728x90

'프로그래밍 > React' 카테고리의 다른 글

useState 상태 업데이트의 2가지 방법.  (0) 2022.08.09
리액트 라우터에서 페이지 이동시마다 특정 이벤트 실행.  (0) 2021.09.17
리액트에서 zxing/library를 활용하여 qrcode, barcode를 읽을 경우 예제코드  (0) 2021.09.15
React 카메라 on/off 문제  (0) 2021.09.14
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함