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.

해결 방법

1. package.json에 ESM 설정 추가:

{
  "type": "module"
}

1. 설정 파일 확장자 변경:

2. JavaScript: vite.config.js → vite.config.mjs

3. TypeScript: vite.config.ts → vite.config.mts

4. 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>

각 방식의 특징:

1. 동기 로딩:
2. HTML 파싱 중단

3. 순차적 실행

4. async:

5. 비동기 로딩
6. 실행 순서 불확실

7. 독립적 스크립트에 적합

8. defer:

9. HTML 파싱 후 실행
10. 실행 순서 보장

11. 의존성 있는 스크립트에 적합

12. type="module":

13. 자동 defer 적용
14. strict mode 기본

15. CORS 규칙 적용

16. 인라인:

17. 즉시 실행
18. 캐싱 불가
19. 추가 요청 없음