JS 최신 문법 => 구문법 변환

강정우·2024년 4월 12일

목록 보기

50/53

index.js:2 Uncaught ReferenceError: exports is not defined

토이 프로젝트를 개발하다보면 가끔 import, export 모듈을 인식하지 못 하는 경우가 발생한다.

그래서 이를 원래는 html 에서 모듈 타입을 지정하면 해결되는데

<sciprt type="module" src="파일위치"></script>

이렇게 타입을 명시해 ES6 모듈로서 스크립트를 로드할 수 있다. 그런데 이를 적용해도 해결이 안 될 땐 빌드 도구나 트랜스파일러를 사용하여 해결하면 된다.

트랜스 파일러에 대해 간단히 말하면 JS 는 그동안 매우 많은 버전이 존재하는데 이 버전들이 어떤 브라우저에서는 지원하고 어떤 브라우저에서는 지원을 안 한다. 그래서 내가 최신 문법으로 작성한 JS 파일을 해당 브라우저에서 지원할 수 있도록 예전 버전의 문법으로 script 를 바꿔주는 도구이다.

그래서 일단 프로젝트를 초기화해주고

npm init -y

다음 Webpack과 필요한 로더들을 개발 의존성으로 설치해주자.
Babel도 함께 설치하여 최신 자바스크립트 코드를 이전 버전의 자바스크립트로 변환할 수 있게 하자.

npm install --save-dev webpack webpack-cli babel-loader @babel/core @babel/preset-env

다음 프로젝트 루트 디렉토리에 .babelrc 파일을 생성하고, Babel이 최신 자바스크립트 코드를 이전 버전으로 변환할 때 사용할 규칙을 정의를 해준다.

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

다음 똑같이 프로젝트 루트에 webpack.config.js 파일을 생성하고, 다음과 같이 기본적인 Webpack 설정을 추가해준다.

const path = require('path');

module.exports = {
    mode: 'development',
	// 프로젝트의 진입점 파일임
    entry: './index.js', 
    output: {
        // 번들 파일을 저장할 경로
        path: path.resolve(__dirname, 'dist'),
        // 번들 파일 이름
        filename: 'bundle.js' 
    },
    module: {
        rules: [
            {
                // .js 확장자로 끝나는 모든 파일에 적용
                test: /\.js$/, 
                // node_modules 폴더는 제외
                exclude: /node_modules/, 
                use: {
                    // babel-loader를 사용하여 ES6 이상의 코드를 변환
                    loader: 'babel-loader', 
                }
            }
        ]
    }
};

마지막으로 package.json 파일에 npm run build 를 하여 나올 dist 파일을 설정하기 위한 script 코드만 수정해주면

{
  "name": "1_particle_basic",
  "version": "1.0.0",
  "main": "index.js",
  // 여기 아래 부분
  "scripts": {
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "@babel/core": "^7.24.4",
    "@babel/preset-env": "^7.24.4",
    "babel-loader": "^9.1.3",
    "webpack": "^5.91.0",
    "webpack-cli": "^5.1.4"
  }
}

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
<script type="module" src="./dist/bundle.js"></script>
</body>
</html>