1. Babel 설치하기: 프로젝트의 루트 디렉토리에서 다음 명령어를 실행하여 Babel과 관련된 패키지를 설치합니다.

npm install --save-dev @babel/cli @babel/preset-env

1. .babelrc 파일 생성하기: 프로젝트의 루트 디렉토리에 .babelrc 파일을 생성하고 아래 코드를 추가합니다.

{
  "presets": ["@babel/preset-env"]
}

1. 모듈 변환하기: 변환하려는 JavaScript 파일이 있는 디렉토리에서 다음 명령어를 실행하여 모든 JavaScript 파일을 하나의 디렉토리에 변환한 뒤, 변환된 파일을 사용하도록 설정합니다.

npx babel src --out-dir dist

위 명령어에서 src는 원본 JavaScript 파일이 있는 디렉토리를, dist는 변환된 파일을 저장할 디렉토리를 나타냅니다.

1. HTML 파일에서 변환된 모듈 불러오기: 변환된 모듈을 사용하기 위해 HTML 파일에 <script> 태그를 추가합니다.

<script src="dist/my-module.js"></script>

위 코드에서 dist/my-module.js는 실제 변환된 모듈 파일의 경로입니다.

이제 Babel을 사용하여 모듈 시스템을 호환하는 설정이 완료되었습니다. 변경된 ES6 모듈 문법을 사용하여 JavaScript 파일을 작성하고, Babel을 사용하여 호환되는 모듈로 변환할 수 있습니다.