신형 -> 구형으로 기본Babel setting(w. webpack)

Babel

최신 JS -- 변환 --> 구형 JS

=> 구형 browser에서 사용할 수 있게 변환 시켜준다.

 

🦊 1. babel 기본을 위한

"@babel/core, @babel/cli"

🐯 > 설치

@babel/core
: babel package

@babel/cli
: terminal에서 명령 동작 시킬 수 있게 하는 것

> npm init -y
> npm i -D @babel/core @babel/cli

🐯 > package.json

browserslist
: 프로젝트가 어느 browser까지 가능하게 할 것인가(browser 범위 지정)

"browserslist":[
  // global browser 점유율의 1%이상에 해당하는 모든 browser에 적용
  "> 1%", 
  //죽지 않은 browser
  "not dead",
  // ie의 11버전 위까지
  "ie >= 11"
],
"scripts": {
  //babel 진입점 --out-dir 반환폴더
  "babel": "babel main.js --out-dir dist"
}

 

🦊 2. babel 동작을 위한

"@babel/preset-env"

🐯 > 설치

@babel/preset -env

: 최신 문법을 구형의 browser에서 동작할 수 있도록 변환(전역에서 변환된다.) => @babel/plugin-transform-runtime 으로 해결합니다. 밑에서 ㅎㅎㅎ

> npm i -D @babel/preset-env

🐯 > babel.config.json

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

 

🦊 3. 전역 오염을 막기 위한

"@babel/plugin-transform-runtime", "@babel/runtime-corejs3"

🐯 > 설치

@babel/plugin-transform-runtime
: 특정 browser 범위의 코드만 변환시켜줄 수 있는 것(전역 오염을 막기위한 방법)

@babel/runtime-corejs3
: 더 하위 버전 browser에서도 동작 가능하게 하는 것

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

🐯 > babel.config.json

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

 

🦊 4. webpack으로 실행을 위한

"webpack, webpack-cli", "webpack-dev-server",

"html-webpack-plugin", "babel-loader"

🐯 > 설치

babel-loader
: webpack에서 babel loader 하기 위한 것

나머지 여기 요기 보세요

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

🐯 > webpack.config.json

const path = require('path');
const HtmlPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './main.js',
  output: {
    publicPath: '/',
    clean: true, // dist/ 내부 불필요한 file 제거
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      }
    ]
  },
  plugins: [
    new HtmlPlugin({
      template: './index.html'
    })
  ]
}

🐯 > package.json

실행을 위한 것 제작

"browserslist":[
  "> 1%", 
  "not dead",
  "ie >= 11"
],
"scripts": {
  "dev": "webpack-dev-server --mode development",
  "build": "webpack --mode production",
  "babel": "babel main.js --out-dir dist"
}

 

마치며

babel을 공부하면서 역시 이런 것이 있구나 라는 생각으로 개발자들을 더욱 존경하게 되었습니다.

 

REF

프로그래머스 데브코스

https://babeljs.io/docs/en/