ES5 문법 호환을 위한 Webpack, Babel 설치와 사용

IE11 환경 -> ES5 문법 사용

ES5 문법을 사용해 코드를 짜면서 ES6에서도 호환될 수 있도록 웹팩과 바벨을 사용해야 한다.

 

Webpack: JS 모듈 관리 도구

Babel: ES5 -> ES6 문법으로 컴파일 해주는 컴파일러

 

 

설치와 설정

1. npm init -y: package.json 파일을 생성

2. Webpack과 Babel 관련 패키지를 설치

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

 

3. .babelrc를 프로젝트 루트에 생성

ES6 이상을 ES5로 변환하기 위한 설정

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

 

4. 프로젝트 루트에 webpack.config.js 파일 생성

module.exports = {
  entry: './src/index.js', // 진입점 파일 설정
  output: {
    path: __dirname + '/dist', // 번들 파일의 출력 경로
    filename: 'bundle.js' // 출력 파일명
  },
  module: {
    rules: [
      {
        test: /\.js$/, // .js 확장자로 끝나는 모든 파일
        exclude: /node_modules/, // node_modules 폴더는 제외
        use: {
          loader: 'babel-loader', // babel-loader를 사용하여 ES6 이상의 코드를 변환
        }
      }
    ]
  }
};

Webpack과 Babel을 연동하는 설정

 

 

 

빌드 실행

1. npm run build 명령어를 사용하기 위한 설정

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode production"

package.json에서 scripts의 test 아래 부분에 build 추가

 

2. npm run build

이 명령어는 Webpack을 사용하여 소스 코드를 빌드하고, 설정된 출력 경로(예: dist 폴더)에 번들 파일(예: bundle.js)을 생성

 

이 과정을 완료하면, 프로젝트의 소스 코드가 Webpack과 Babel을 통해 변환되고 번들링되어, 최종적으로 구형 브라우저에서도 호환 가능한 JavaScript 파일이 생성된다.

이 파일을 웹 프로젝트에 포함시키면 IE11 같은 구형 브라우저에서도 최신 JavaScript 코드를 문제 없이 실행할 수 있게 된다.