바벨(babel) 실습

ES6 모듈 문법

기본 문법

exprot

다른 파일에서 가져다 쓸 변수나 함수의 앞에 export 라는 키워드를 붙인다.

export 변수, 함수

import

export된 파일의 변수나 함수를 import로 불러와 사용할 수 있다.

import { 불러올 변수 또는 함수 이름 } from '파일 경로';

기본예제

export

/* math.js */
export var pi = 3.14;

import

/* app.js */
import { pi } from "./math.js";

console.log(pi); // 3.14

---

바벨

바벨은 주로 ECMAScript 2015+ 코드를 현재 및 과거의 브라우저와 같은 환경에서 호환되는 버전으로 변환하는데 주로 사용되는 도구이다.
바벨 공식 사이트 : https://babeljs.io/

차세대 자바스크립트

const sum = (a, b) => a + b;

크로스브라우저 위한 자바스크립트 변환

var sum = function (a, b) {
  return a + b;
};

---

바벨 실습

바벨 패키지 종류

플러그인	패키지 이름
Babel 플러그인	@babel/core @babel/preset-env
Webpack 플러그인	babel-loader

패키지 설치 결과

/* package.json */
{
  "name": "exercise",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.2.0",
    "babel-loader": "^8.0.4",
    "webpack": "^4.27.1",
    "webpack-cli": "^3.1.2"
  }
}

환결설정

/* webpack.config.js */
module.exports = {
  mode: "production",
  mode: "none",
  entry: "./js/app.js",
  output: {
    path: path.resolve(__dirname, "build"),
    filename: "main.bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
          },
        },
      },
    ],
  },
  stats: {
    colors: true,
  },
  devtool: "source-map",
};

소스맵

환결설정 내용 중 devtool: 'source-map'은 소스맵(Source Map)이란 배포용으로 빌드한 파일과 원본 파일을 서로 연결시켜주는 도구로 배포 후 디버깅 과정에서 번들링(압축, 난독화) 소스가 아닌, 원본 소스를 확인 할 수 있도록 편의성을 제공한다.
해당 설정을 추가하면 빌드 결과물 폴더에 확장자 .map이 추가된다.