바벨-bable

Babel (JavaScript 컴파일러)

 Babel이란?

Babel은 최신 JavaScript 코드를 구형 브라우저나 Node.js 환경에서 사용할 수 있도록 ES5로 변환해 주는 컴파일러

Babel 설치

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

필수 패키지

패키지설명

@babel/core	Babel 핵심 패키지
@babel/preset-env	최신 자바스크립트 문법 지원
babel-loader	Webpack과 Babel 연동

 

2.4 Babel 사용 방법

1) Webpack과 함께 사용하기

webpack.config.js

const path = require("path");
module.exports = {
  entry: "./src/index.js",
  output: { path: path.resolve(__dirname, "dist"), filename: "main.js" },
  mode: "development",
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: { loader: "babel-loader" },
      },
    ],
  },
};

2) Babel 단독 컴파일

npx babel src --out-dir dist

3. Babel 예제 코드

src/index.js

const greet = (name) => {
  console.log(`Hello, ${name}`);
};
greet("Nell");

컴파일 후 코드 (ES5)

"use strict";
var greet = function greet(name) {
  console.log("Hello, " + name);
};
greet("Nell");