반응형 FE28 vite 빌드하기 여러 플랫폼 static site 배포 메뉴얼 간단하게 배포 서비스 이용하기 브라우저 호환성 vite는 기본적으로 각 브라우저별로 아래 버전을 지원합니다. Chrome >=87 Firefox >=78 Safari >=14 Edge >=88 호환을 커스터마이징 하고 싶다면 빌드옵션을 수정해줍니다. 주의할 점은 문법만 호환에 맞게 하는 것일 뿐 polyfill 은 직접 해야합니다. 이는 플러그인으로 설정해 줄 수 있습니다. Multi-Page App 단순히 html 파일을 구분하면 되지만 빌드시에는 하나로 합쳐지기 때문에 vite.config.js에서 entry points를 명시해주어야합니다. Library Mode 제가 가장 마음에 들었던 부분입니다. 라이브러리를 개발하기위해서, 개발환경을 세팅하지만, .. 2023. 1. 9. vite 가 CSS, Static Assets, JSON, Dynamic Imports를 처리하는 방법 Client Types vite는 기본값으로 nodeJS API 타입을 참조합니다.(실제 개발환경이 브라우저가 아니기 때문에) 하지만 결국 브라우저에서 동작하는 코드를 작성하기 때문에 d.ts 파일을 만들어 아래 코드를 작성해줘야 합니다. /// 이로써 얻는 효과는 1. asset 을 import 할 때 린트가 발생하지 않습니다. (e.g .svg, .png ...) 2. import.data.env 타입을 제공해줍니다. 3. import.meta.hot 타입을 제공해줍니다. 아래와 같이 타입선언을 덮어쓸 수 있습니다. " /// "이전에 해주어야합니다. declare module '*.svg' { const content: React.FC export default content } /// CSS 1... 2023. 1. 9. vite의 module 처리와 typescript 설정 살펴보기 NPM Dependency 설치 및 Pre-Bundling 브라우저에서도 es module system 을지원하고 있고, vite는 이방식을 사용하고 있습니다. 하지만 아래 코드와같이 브라우저 상에서는 npm 모듈을 임포트할 수 없습니다. node 환경이 아니기 때문에 인식조차 할 수 없기 때문입니다 예시로 dayjs 라이브러리를 루트dir에서 설치하고 브라우저에서 import 해본 결과입니다. import dayjs from 'dayjs' console.log(dayjs) 왼쪽은 vite dev 결과이고, 오른쪽은 html파일을 그대로 열었을 때 입니다. 이는 vite 가해주는 역할 덕분입니다. 1. 설치된 commonJS/UMD 모듈을 ESM으로 변경합니다. 2. esbuild를 사용하여 변환한 모듈.. 2023. 1. 9. Vite로 개발환경 만들기 vite, webpack 등은 웹개발 번들링 툴입니다. Vite vs Webpack 비교적 신생 vite 가 webpack 보다는 수치상으로는 당연히 뒤처질수 밖에 없다고생각합니다만 저도 webpack 한참 공부하고, 또 vite 공부해야되? 라는 생각에 거부감이 좀 있었지만, 틈틈히 사용해보면서 webpack 보다 간편하고 빠른 사용경험을 했고, 충분히 공부할 가치가 있다고 생각했습니다. vite를 써야하는 이유 풍부한 템플릿 1. CLI - 커맨드라인으로 선택하면서 간편히 구성할 수 있습니다. npm create vite@latest 2. template - 옵션으로 바로 완성된 템플릿을 불러 올 수 있습니다. 3. 커뮤니티 템플릿 - 공식으로 제공하는 템플릿 외 커뮤니티에서는 더 많은 개발환경 세팅.. 2023. 1. 8. 이전 1 2 3 4 5 다음 반응형
