Vite CJS 빌드 경고 해결 방법: 모듈 시스템 이해하기
반응형
Vite의 CJS 빌드 경고 해결
Vite 5에서 나타나는 다음 경고를 해결하는 방법을 설명하겠습니다:
The CJS build of Vite's Node API is deprecated. See https://vite.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.
해결 방법
- package.json에 ESM 설정 추가:
{
"type": "module"
}
설정 파일 확장자 변경:
JavaScript:
vite.config.js
→vite.config.mjs
TypeScript:
vite.config.ts
→vite.config.mts
import 별칭(alias) 수정:
// 이전 (CJS 방식)
alias: {
'@': path.resolve(__dirname, './src')
}
// 변경 후 (ESM 방식)
import { fileURLToPath } from 'url'
import { dirname, resolve } from 'path'
const __filename = fileURLToPath(import.meta.url)
const __dirname = dirname(__filename)
export default {
resolve: {
alias: {
'@': resolve(__dirname, './src')
}
}
}
JavaScript 모듈 시스템
1. CJS (CommonJS)
// 내보내기
module.exports = { myFunction };
// 가져오기
const { myFunction } = require('./module');
특징:
- Node.js 기본 모듈 시스템
- 동기적 로딩
- 런타임에 모듈 해석
2. ESM (ES Modules)
// 내보내기
export const myFunction = () => {};
// 가져오기
import { myFunction } from './module';
특징:
- 모던 JavaScript 표준
- 정적 분석 가능
- Tree-shaking 지원
3. UMD (Universal Module Definition)
(function(root, factory) {
if (typeof define === 'function' && define.amd) {
define(['dependency'], factory);
} else if (typeof module === 'object' && module.exports) {
module.exports = factory(require('dependency'));
} else {
root.myModule = factory(root.dependency);
}
}(this, function(dependency) {
return {};
}));
HTML 스크립트 로딩 방식
<!-- 1. 동기 로딩 -->
<script src="script.js"></script>
<!-- 2. 비동기 로딩 -->
<script async src="script.js"></script>
<!-- 3. 지연 로딩 -->
<script defer src="script.js"></script>
<!-- 4. ES 모듈 -->
<script type="module" src="script.js"></script>
<!-- 5. 인라인 스크립트 -->
<script>
console.log('즉시 실행');
</script>
각 방식의 특징:
- 동기 로딩:
- HTML 파싱 중단
순차적 실행
async:
- 비동기 로딩
- 실행 순서 불확실
독립적 스크립트에 적합
defer:
- HTML 파싱 후 실행
- 실행 순서 보장
의존성 있는 스크립트에 적합
type="module":
- 자동 defer 적용
- strict mode 기본
CORS 규칙 적용
인라인:
- 즉시 실행
- 캐싱 불가
- 추가 요청 없음
반응형
'OK' 카테고리의 다른 글
2024년 최신 AI 코딩 도구 완벽 가이드: GitHub Copilot부터 Cursor AI까지 8가지 비교 분석 (2) | 2024.11.01 |
---|---|
React에서 람다 함수를 선호하는 4가지 이유 (화살표 함수 활용법) (0) | 2024.11.01 |
How to Resolve Vite CJS Build Warning: Uanderstanding Module Systems (0) | 2024.10.30 |
Node.js 프로젝트의 폴더 구조 가이드: 단수와 복수 네이밍 컨벤션 (0) | 2024.10.30 |