자주 쓰는 loader 2(babel-loader feat.babel-polyfill)

5.babel-loader

ES6이상의 자바스크립트 코드는 인터넷 익스플로러 혹은 버전이 낮은 구버전 브라우저에서 지원하지 않는 경우가 있다.

이런 점을 착안하여 ES6이상의 문법을 ES5이하의 코드로 트랜스파일링하도록 하는 기능이 babel이며 이 babel을 웹팩으로 파일을 번들링할 때도 실행하게끔 해주는 것이 babel-loader다.

 

우선 npm install --save-dev babel-loader @babel/cli @babel/core @babel/preset-env 로 다운 받는다.

babel-loader: 웹팩과 바벨을 연동시키도록 해준다.

아래의 것들은 플러그인이지만 babel-loader과 같이 쓰이기 때문에 간략하게 소개하면 아래와 같다.

@babel/cli : 터미널에서 바벨 명령어를 사용할 수 있게 도와준다.

@babel/core : 바벨의 핵심 기능을 포함한다.

@babel/preset-env : es6의 문법을 es5의 문법으로 사용할 수 있게끔 es6의 문법을 트랜스파일링을 해주는 플러그인이다.

 

그 다음 프로젝트 최상위 루트에 .babelrc라는 파일을 생성하고 아래와 같이 작성한다.(js파일이 아니다.)

.babelrc은 특정 babel plugin들을 모아놓고 사용하는 설정파일이라고 할 수 있다.

 

// .babelrc

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

 

그 다음 아래와 같은 loader를 webpack.confi.js에 추가입력한다.

exclude라는 키는 바벨 대상에서 제외할 파일들이 있는 경로를 의미한다.

 

//webpack.config.js

module: {
  rules: [
    // ...
    {
      test : /\.js$/,
      include: path.resolve(__dirname,'src/main/resources/static/js'),
      exclude: /node_modules/,
      use : {
        loader: 'babel-loader'
      },
      options: {
        presets: ['@babel/preset-env']
      }
    },
    // ...
  ]
}

 

이후 웹팩을 실행시키면 트랜스파일링 및 번들링이 동시에 이루어지며 브라우저에 반영된 것을 알 수 있다.

 

P.S babel-polyfill

babel-polyfill은 추후에 다룰 플러그인이지만 babel-loader와 연계해서 사용할 필요가 있기 때문에 이 글에서 설명하고자 한다.

webpack에서 말하는 플러그인의 개념은 추후에 다룰 예정이다.

바벨과 웹팩으로 트랜스파일링 및 번들링을 한 후 브라우저에 최초 접속했을 때 해당 에러가 콘솔에 찍혔다.

 

ReferenceError: regeneratorRuntime is not defined

 

이것은 자바스크립트 ES6이상의 최신코드를 트랜스파일링을 진행해도 대체할 ES5 기능이 없기 때문에 ES5문법으로 되돌리지 못하는 경우가 있어 발생한 에러이다.

예 : promise, async,await 등등

 

다음과 같이 패키지를 설치하여 해결해보자!

npm install @babel/polyfill을 설치한다.

(중요 : babel/polyfill은 개발 환경에서만 사용하는 것이 아니라 실제 환경에서도 사용하여야 하므로 --save-dev 옵션으로 개발 설치를 하지 않도록 한다.)

이 패키지들은 오래된 브라우저에서도 ES6이상의 코드 중 ES5 코드로 대체되지 않은 것들(promise, async,await 등등)를 사용하도록 해주는 기능을 한다.

 

그 다음으로 webpack.config.js의 entry의 가장 맨 앞에 아래와 같이 코드를 추가하자!

module.exports = {
  // ...
  entry: {
    index : [
      '@babel/polyfill',
      'index.js'
    ],
  }
  // ...
}

 

이제 웹팩을 실행하면 모든 최신코드들이 구버전 브라우저에서도 실행되는 것을 알 수 있다.