Babel · Babel

Node.js

# Node.js 버전 확인
➜ node -v
v20.9.0

# v20.9.0 가 설치되어 있지 않다면
➜ nvm install 20.9.0

# v20.9.0 를 사용하고 있지 않다면
➜ nvm use 20.9.0

# Node.js 버전 다시 확인
➜ node -v
v20.9.0

npm

# npm 버전 확인
➜ npm -v
10.2.1

# 최신 버전 npm 으로 업그레이드 
➜ npm i [email protected] -g

# npm 버전 다시 확인
➜ npm -v
10.2.1

pnpm

# pnpm 설치 확인 및 버전 확인
➜ pnpm -v
8.10.0

# 최신 버전 pnpm 으로 업그레이드 
➜ npm i [email protected] -g

# pnpm 설치 다시 확인 및 버전 다시 확인
➜ pnpm -v
8.10.0

Create Project

➜ mkdir babel-example

➜ cd babel-example

➜ corepack enable

➜ pnpm init

➜ corepack use [email protected]

➜ pnpm add @babel/core @babel/cli -D

{
  "name": "babel-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "babel src --out-dir dist",
    "test": "echo \\"Error: no test specified\\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "packageManager": "[email protected]+sha1.77d568bacf41eeefd6695a7087c1282433955b5c",
  "devDependencies": {
    "@babel/cli": "^7.23.0",
    "@babel/core": "^7.23.2"
  }
}

Compile

// babel-example/src/arrow.js

const test = () => {
  console.log("test");
};

➜ pnpm build

➜ cat dist/arrow.js
const test = () => {
  console.log("test");
};%

Plugin 사용

➜ pnpm add @babel/plugin-transform-arrow-functions -D

// babel-example/.babelrc.json

{
  "plugins": ["@babel/plugin-transform-arrow-functions"]
}

➜ pnpm build

➜ cat dist/arrow.js
const test = function () {
  console.log("test");
};%

Preset 사용

➜ pnpm add @babel/preset-env -D

// babel-example/.babelrc.json

{
  "presets": ["@babel/preset-env"]
  // "plugins": ["@babel/plugin-transform-arrow-functions"]
}