vite, typescript, react env 설정

알게된것

* NODE_ENV는 환경변수로 노드환경에서 자동으로 만들어져서 개발에는 development, 빌드한것에는 production으로 이루어짐

* 정적파일 특히 이미지파일들은 public폴더내에서 인식된다. 때문에 필요하다면 publicDir이라는것을 강제로 변경해줘야한다.(최근에 assetsDir로 바뀐듯함)

* package.json script에서 맥/리눅스용 윈도우용 명령어가 따로있다.

* .env들은 src경로안에서 VITE_로 시작해야 vite가 인식해서 리엑트내에서도 사용가능

.env

VITE_REACT_APP_URL=http://localhost:5002/

blabla.tsx

console.log('mode',process.env.NODE_ENV)
if(import.meta.env){
    const VITE_ENV = JSON.stringify(import.meta.env)
    console.log(VITE_ENV)
};

아래 샘플코드들은 개인개발환경에따라 다르니 참고만해주세요.

tsconfig.json

baseUrl을 src내부로 설정하고 그안에 assets/js에있는 코드를

빌드할때 타입스크립트 -> 자바스크립트로 변환하는것을 설정

{
  "compilerOptions": {
    "target": "ES6",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable","ES6"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    // "jsx": "react-jsx",
    "jsx": "preserve",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,

    "baseUrl": "./src",
    "paths": {
      "/assets/js/*": ["./assets/js/*"]
    }
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

 

vite.config.ts

역시 기본폴더는 src로 명명하고 만약 NODE_ENV가 production인지 stage인지에따라서 삼항연산자로 빌드할 폴더명을 분리함(build, build-qa)이외에도 다른방법 엄청많음. 아예 아래 defineConfig를 모드(development, production, stage)별로 3개로 분리하는방법도있음

이미지가 아무리해도 빌드된파일에 안들어있어서 삽질하다가 publicDir(기본값 public폴더)의 폴더를 이미지가 들어있는 폴더로 변경해줘서 강제 인식시킴.

rollupOptions를 통해서 페이지분리 자세한방법은 하단의 빌드옵션참고

import {resolve} from 'path'
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'

const root = resolve(__dirname, 'src')
const isProduction = process.env.NODE_ENV === 'production'
const buildPath = isProduction ? 'build' : 'build-qa'
// https://vitejs.dev/config/
export default defineConfig({
  root,
  plugins: [react()],
  build:{
    outDir: resolve(__dirname, buildPath),
    emptyOutDir:true,
    rollupOptions:{
      input:{
        main: resolve(root, 'index.html'),
        connect:resolve(root, 'connect', 'index.html'),
        invalid:resolve(root, 'invalid', 'index.html'),
        'guide/connect':resolve(root, 'guide', 'connect', 'index.html')
      }
    }
  },
  publicDir:'assets'//정적파일위치(.png빌드)
})

 

package.json

build, build-qa할때 NODE_ENV는 자동으로 production으로 된다.

그래서 build-qa할때는 NODE_ENV를 stage라는 이름이되도록 변경했다. --mode stage명령어를통해 env.stage를 인식해 빌드하도록함

  ...
  "scripts": {
    "dev": "vite",
    "build": "tsc && set VITE_ENV=production&& vite build",
    "build-qa": "tsc && set NODE_ENV=stage&& vite build --mode stage",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview",
    "preview-qa":"set NODE_ENV=stage&& set VITE_ENV=stage&& vite preview"
  },
  ...

set은 윈도우 전용이라서 만약 맥사용중이라면 set명령어 대신에 export명령어로 변경해줘야한다.

둘다 호환해야한다면 cross-env를 설치한뒤에 cross-env명령어로 변경해준다.(테스트해보니 vite앞에 && 꼭지워야함)

...
"build-qa": "cross-env NODE_ENV=stage vite build --mode stage",
...

 

https://vitejs.dev/config/build-options.html

Vite

https://vitejs.dev/guide/

Vite

 

https://ko.vitejs.dev/guide/env-and-mode.html

Vite