cra없이 개발환경 세팅하기 - 2. Babel

Babel 활용하기

Babel이 제공하는 기능

Babel은 자바스크립트 컴파일러로써, 브라우저가 interpret하지못하는
최신의 자바스크립트 코드를 이전단계의 자바스크립트로 변환해주는 개발 도구이다. 이 기능을 담당하는 개발 도구를 transpiler 라고 하는데, 이 transpiler가 필요한 이유는 ES6이상의 버전으로 작성된 자바스크립트가 IE를 포함한 모든 브라우저에서 정상적으로 구동될만한 환경을 구축해야하기 때문이다.

Babel은 구문 변환, polyfil, 소스코드변환 등의 기능을 담당할 수 있는데, 설치된 프리셋이 있다면 그 프리셋을 bablerc라는 파일에서 연결해줄 수 있다.

Babel 설치

npm install --save-dev babel-loader

npm install --save-dev @babel/core

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

npm install --save-dev @babel/preset-react

npm install --save-dev babel-preset-es2015

1.webpack.config.js파일 output이하 라인에 아래 코드를 추가한다.

module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      }
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  },

2. root 폴더에 .babelrc 파일 생성 후 아래 코드를 추가한다.

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