Babel 구성

Babel

최신 JS 문법(2015+)을 구형 JS로 변환하는 트랜스컴파일러

프로젝트 초기화

npm init -y

babel 설치

npm i -D @babel/core @babel/cli

package.json에서 scripts 설정

// 진입점, 내보내기 할 폴더 지정

"scripts": {
    "babel": "babel main.js --out-dir dist"
  },

플러그인 설치
해당 플러그인이 개입해서 코드를 변환

npm i -D @babel/plugin-transform-block-scoping

npm i -D @babel/plugin-transform-arrow-functions

babel.config.json 파일 생성하고 플러그인을 통해 옵션을 세팅

{
    "plugins": [
        "@babel/plugin-transform-block-scoping", // var로 변환
        "@babel/plugin-transform-arrow-functions" // arrow function 변환
    ]
}

변환 실행

npm run bable

preset-env

위 과정을 반복하는 것은 어려움이 있다.
따라서 자동으로 세팅이 되어있는 preset-env 라는 패키지가 있다.

preset-env 설치

npm i -D @babel/preset-env

babel.config.json에 등록

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

변환 된 결과가 전역을 오염시킬 수 있다는 단점이 있다.
그것을 보완하기 위해
@babel/plugin-transform-runtime을 설치해서 전역을 오염시키지 않고도 변환이 된 결과가 동작할 수 있도록 만듦
또한 작성한 코드만 변환을 해주게 됨

corejs3버전은 변환할 수 있는 기능이 더 많음
기존의 2버전을 3버전으로 변경하기 위해 @babel/runtime-corejs3 설치

npm i -D @babel/plugin-transform-runtime @babel/runtime-corejs3

bable.config.json 파일에 플러그인 등록 후 옵션 설정

{
    "presets": ["@babel/preset-env"],
    "plugins": [
        ["@babel/plugin-transform-runtime", {
            "corejs": 3
        }]
    ]
}

browserslist

package.json에서 지원하는 브라우저의 범위를 작성

"browserslist": [
    "> 1%", // 글로벌 브라우저 점유율의 1% 이상에 해당하는 모든 브라우저 지원
    "last 2 versions", // 마지막 2개 버전까지 지원
    "not dead", // 아직 운영이 되고있는 브라우저 지원
    "ie >= 11" // 인터넷 익스플로어 11버전 이상 지원
  ],

Webpack

브라우저는 require를 인식하지 못함
번들해주는 webpack 필요

webpack과 필요한 패키지 추가 설치

npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin babel-loader

webpack.config.js 파일 생성 후 작성

const HtmlPlugin = require('html-webpack-plugin')
module.exports = {
    entry: './main.js',
    output: {
       publicPath: "/",
       clean: true 
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: 'babel-loader'
            }
        ]
    },
    plugins: [
        new HtmlPlugin({
            template: "./index.html"
        })
    ]
}

package.json에서 scripts 작성

"scripts": {
    "babel": "babel main.js --out-dir dist",
    "dev": "webpack-dev-server --mode development",
    "build": "webpack --mode production"
  },