Babel.JS

바벨(Babel)은 ES6 이상의 코드를 ES5 이하 버전으로 변환하기 위해 사용합니다.

babel-loader: 웹팩(Webpack) 지원을 위해 사용합니다.
@babel/core: 바벨이 실제 동작하는 모듈입니다.
@babel/preset-env: 바벨의 지원 스펙을 지정합니다.

//package.json 파일을 생성한다.
npm init -y

우리가 JavaScript ES6버전 이상의 문법을 사용할것 이기때문에 바벨을 필수적으로 설치해야 합니다. 공부하는 과정에서는 바벨이 필요 없습니다. 하지만 본격적으로 개발을 시작할때는 필수입니다.!

여기서는 바벨 환경설정에 대해서 알아보겠습니다.

// Webpack V4는 webpack-cli를 요구한다
$ npm install --save-dev webpack webpack-cli path lodash

babel-loader

Webpack이 모듈을 번들링할 때 Babel을 사용하여 ES6+ 코드를 ES5 코드로 빌드하도록 babel-loader를 설치한다.

// babel-loader 설치
$ npm install --save-dev babel-loader

이제 npm script를 변경하여 Babel 대신 Webpack을 실행하도록 수정하자. 아래와 같이 package.json 파일의 scripts를 변경한다. 완성된 package.json 파일은 아래와 같다.

min, TreeShaking, Uglify 3가지

Webpack에서

min파일로 압축해서 내보내기
TreeShaking (트래시레이킹) = 사용하지 않는 변수를 지워, 메모리 사용양까지 절약한다.
Uglify (어글리파이) = 코드를 못생기게 만든다. 이는 쉽게 알아보지 못하도록 압축하고 복잡하게 코드를 작성하는 것이다.

npm i -D @babel/core @babel/preset-env

babel-polyfill

바벨 그 자체로는 ES2015의 새로운 객체(Promise, Map, Set 등등)과 메소드(Array.find, Object.assign 등등)을 사용할 수 없습니다. 왜냐하면 ES2015에서 처음 생긴 거라 구형 자바스크립트에는 그에 상응하는 코드가 없거든요. 그래서 babel-polyfill을 설치해야 새로운 기능을 사용할 수 있습니다.

단점: 의존하고 있는 코드가 너무 무겁다. 그래서 프로젝트 전체가 무거워 질수 있습니다. 옛날 구형 브라우저를 꼭 지원해야 하는 프로젝트이면 설치를 하고, 최신 브라우저만 지원하는 프로젝트이면 설치할 필요 없습니다.

npm install @babel/polyfill

import '@babel/polyfill';

const val = Object.assign({ a: '1' }, { a: 'b' });
export default val;

웹팩을 사용한다면 파일에 import '@babel/polyfil';하는 대신 웹팩 설정 파일 entry에 적어도 됩니다. 다음과 같이요.

// webpack.config.js
{ entry: ['@babel/polyfill', './app.js'],

babel preset

다양한 babel preset들이 있는데 babel foundadtion에서 제공하는 공식 preset과 Airbnb같은 곳에서 제공하는 비공식 preset이 있다. 심지어 우리가 만들 수도 있다.

공식 preset 종류들 :

@babel/preset-env, @babel/preset-flow, @babel/preset-react, @babel/preset-typescript

개별 플러그인 대신 사전 설정에서 플러그인 세트를 활성화 할 수도 있습니다.

설정방법: .babelrc 파일 수동으로 만들고 아래와 같이 설정을 해줘야 한다.

// package.json

{
  "name": "vue-todo-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
     "prod": "webpack --mode=production",  // 배포된 코드를 min으로 압축, TreeShaking, Uglify 3가지를 동시해 한다.
     "dev": "webpack --mode=development"   // 코드를 배포한다.
  },
"author": "",
"license": "MIT",
 "devDependencies": {
    "babel-loader": "^8.0.6",
    "@babel/cli": "^7.7.0",
    "@babel/core": "^7.7.5",
    "@babel/preset-env": "^7.7.6",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10",
    "css-loader":"^3.2.1",
    "lodash": "^4.17.15",
    "path": "^0.12.7"
  },
"dependencies": {
    "@babel/polyfill": "^7.7.0"
  }
}

// 터미널
npm install

webpack.config.js

webpack.config.js은 Webpack이 실행될 때 참조하는 설정 파일이다. 프로젝트 루트에 webpack.config.js 파일을 생성하고 아래와 같이 작성한다.

// webpack.config.js
const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyPlugin = require('copy-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const merge = require('webpack-merge')
require('@babel/polyfill')

module.exports = (_, opts) => {
    const config = {
        // ========= 공통되는 옵션들 =========
        resolve: { // 확장자를 생략할수 있는 옵션(기능)
            extensions: ['.js', '.css']
        },
        entry: {
            app: [
                '@babel/polyfill',
                path.join(__dirname, 'triple_JS/App.js')
            ]
        },
        module: {
            rules: [
                {
                    test: /\.js$/,
                    exclude: /node_modules/,
                    use: 'babel-loader'
                },
                {
                    test: /\.css$/,
                    use: [
                        'vue-style-loader',
                        'css-loader',
                        'postcss-loader'
                    ]
                }
            ]
        },
        plugins: [
            new VueLoaderPlugin(),
            new HtmlWebpackPlugin({
                template: path.join(__dirname, 'public/index.html')
            }),
            new CopyPlugin([
                {
                    from: 'src/imgs/',
                    to: 'imgs/'
                }
            ])
        ],
        output: {
            filename: '[name].js',
            path: path.join(__dirname, 'dist')
        }
    }
    // ========= 개발용 =========
    if (opts.mode === 'development') {
        return merge(config, {
            // 추가 개발용 옵션
            devtool: 'eval',
            devServer: {
                open: false, // 강제로 브라우저로 화면 이동을 할수 있는 옵션
                hot: true // 실시간으로 바로 화면에 수정된것이 반영된것을 뜻한다.
            }
        })
    // ========= 제품용 =========
    } else {
        return merge(config, {
            // 추가 제품용 옵션
            devtool: 'cheap-module-souce-map',
            plugins: [
                new CleanWebpackPlugin()
            ]
        })
    }
}

// .babelrc

{
  "presets": [
    ["@babel/preset-env", { "targets": { "browsers": ["last 2 versions", ">= 5% in KR"] } }],
    // ["@babel/preset-stage-2", { "decoratorsLegacy": true }]
  ]
}

이제 Webpack을 실행하여 번들링을 실행한다. 트랜스파일링은 Babel이 실행하고 번들링은 Webpack이 실행한다. 아래 명령을 실행한다.

// 터미널
$ npm run prod

targets 옵션을 살펴보면, 브라우저들에 대해서는 최신 두 버전(IE는 10과 11, 크롬과 파이어폭스, 사파리, 엣지는 최신 두 버전)과 한국에서 5% 이상 점유율을 차지하는 브라우저를 모두 지원하라고 설정해준 겁니다. 저렇게만 쓰면 babel이 알아서 최신 자바스크립트 코드를 지정한 targets에 맞게 호환되는 자바스크립트 코드로 바꿔줍니다. 정말 편하죠!

Browserslist

Browserslist 참고!! 브라우저 버전 별도로 호환가능하게 할수 있는 코드 정리 사이트입니다.!!

PreviousTRIPLE-PLUS Adout Next01.Vanilla-JS

Last updated 3 years ago