Babel

Babel은 js compiler로 일부 browser에서 사용이 불가한 js 일부 언어를 변형(DownGrade라고 생각하면 쉽다)하여 사용할 수 있게 도와주는 것이다.

 

우리가 Babel을 사용하기 위해서는 대체로 아래 3가지를 설치한다.

Babel Core - Babel의 코어한 부분을 가지고 있다. code를 읽고 compile하는 역할을 한다.

Babel Loader - Webpack에 Babel을 사용하기 위해서 필요하다.

Babel Preset - Babel이 compile을 하면서 어떤 부분에서 변형을 할 것인지를 결정한다.

 

설치

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

module.exports = {
  // 어디에서 부터 시작할것인지 -> entry
  // default -> src/index.js
  // 여러개의 entry point도 가능하다.
  entry: './index.js',
  output: {
    // webpack이 적용된 파일의 이름
    filename: 'bundle.js',
    // 저장될 위치 -> full path 필요
    // __dirname -> node에서 제공해주는 기본 기능으로 현재까지의 path를 제공해준다.
    path: __dirname + '/dist',
  },
  // loader
  module: {
    // 어떤 파일에 적용 할 것인지
    rules: [{ test: /\.js%/, exclude: /(node_moudles)/, use: 'babel-loader' }],
  },
};

 

.babelrc 파일 추가

Babel에도 설정을 해줘야한다. Babel이 파일을 compile하면서 사용할 규칙들을 설정한다.

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