Client Types
vite는 기본값으로 nodeJS API 타입을 참조합니다.(실제 개발환경이 브라우저가 아니기 때문에)
하지만 결국 브라우저에서 동작하는 코드를 작성하기 때문에
d.ts 파일을 만들어 아래 코드를 작성해줘야 합니다.
/// <reference types="vite/client" />
이로써 얻는 효과는
1. asset 을 import 할 때 린트가 발생하지 않습니다. (e.g .svg, .png ...)
2. import.data.env 타입을 제공해줍니다.
3. import.meta.hot 타입을 제공해줍니다.
아래와 같이 타입선언을 덮어쓸 수 있습니다. " /// "이전에 해주어야합니다.
declare module '*.svg' {
const content: React.FC<React.SVGProps<SVGElement>>
export default content
}
/// <reference types="vite/client" />
CSS
1. CSS Pre-processors (전처리기)
vite는 built-in 으로 .scss, .sass, .less, .styl, .stylus 플러그인을 가지고있기 때문에, 별도의 설정없이 모듈만 설치하면 바로 적용이 됩니다. (설정은 필요없으나 모듈은 반드시 설치해주어야합니다)
2. CSS Modules
기본적으로 제공합니다(옵션을 설정해줄 수 있습니다).
3. PostCSS
postcss.config.js 에 따라 자동으로 반영됩니다.
4. @import, url()
각기 다른 파일에서 사용할 시 경로를 자동으로 변경하여 참조해줍니다.
5. vue의 single file components
<style lang="sass"> 바로 사용 가능합니다
Static Assets
에셋을 다양한 형태로 불러올 수 있습니다.(참조)
import assetAsURL from './asset.js'
import assetAsURL from './asset.js?url'
import assetAsString from './shader.glsl?raw'
import Worker from './worker.js?worker'
import InlineWorker from './worker.js?worker&inline'
에셋의 경우 public URL 을 기본적으로 반환합니다.
하지만 에셋의 경우 이렇게 import 해도 되지만, 개발환경에서 public 폴더를 생성해 그 내부의 것들은 URL로 접근이 가능합니다.
이때 publicDir을 별도로 설정해 줄 수도 있습니다.
JSON
바로 import 할 수 있습니다.
typescript 라면 아래 옵션을 추가해 주어야 합니다.
"resolveJsonModule": true
Dynamic Import
아래와 같이 할 수 있습니다.
tsconfig.json 컴파일 옵션을 module, target 을 요구사항에 맞게 조정해주어야 합니다.
(top-level-await)
module : ES2022
target : ES2017^
const data = await import ('./assets/data.json');
console.log(data)
'FE > vite' 카테고리의 다른 글
[vite] 프론트엔드 개발자를 위한 Vite 101 (0) | 2023.10.10 |
---|---|
vite 환경변수 (0) | 2023.01.13 |
vite 빌드하기 (0) | 2023.01.09 |
vite의 module 처리와 typescript 설정 살펴보기 (0) | 2023.01.09 |
Vite로 개발환경 만들기 (0) | 2023.01.08 |