개발

Vite CJS 빌드 경고 해결 방법: 모듈 시스템 이해하기

syaku 2024. 10. 30. 14:41
반응형

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. 추가 요청 없음
반응형