is a compiler ( ES6+ source code => ES5 output code).
기본 동작을 코드로 설명하자면 const babel = code => code;
이라 할 수 있다.
주어진 코드가지고 변환된 새로운 코드를 생성한다.
1.코드 분석(parse): 코드를 읽고 추상 구문 트리(AST)로 변환합니다.
2.코드 변환(transform): 추상 구문 트리(AST) 를 받아 그 속을 탐색해 나가며 노드들을 추가, 업데이트, 제거 합니다.
※ 코드 변환 과정을 플러그인이 수행한다.
3.코드 생성(generate): 최종 추상 구문 트리(AST)를 취하여 다시 소스 코드 문자열로 만드는데, 소스 맵 또한 생성합니다. 즉 변환된 코드가 출력됩니다.
결국 바벨은 코드 분석, 코드 생성만 하고 코드 변환은 플러그인이 해준다.
npm install -D @babel/core @babel/cli
npx babel app.js
실질적으로 코드 변환을 수행한다.
block-scoping 플러그인
npm install -D @babel/plugin-transform-block-scoping
arrow-functions 플러그인
npm install -D @babel/plugin-transform-arrow-functions
strict-mode 플러그인
npm install --save-dev @babel/plugin-transform-strict-mode
등등 여러 Plugin이 있다
// babel.config.js:
module.exports = {
plugins: [
"@babel/plugin-transform-block-scoping",
"@babel/plugin-transform-arrow-functions",
"@babel/plugin-transform-strict-mode",
],
}
Plugin이 하나씩 많아짐에 따라 설정파일에 각각 추가하는 번거로움을 해결하고자 나왔다.
목적에 맞게 여러 플러그인들을 집합시킨것을 Preset이라 한다.
preset-env
는 ECMAScript2015+를 변환할 때 사용한다.
// babel.config.js:
module.exports = {
presets: ["@babel/preset-env"],
}
설정파일에서 targets
옵션을 사용해서 지원할 브라우져를 선택할 수 있다.
Option
을 사용할려면 presets: [ [preset, {option}] ]
형식으로 적어주면 된다.
// babel.config.js
module.exports = {
presets: [
[
"@babel/preset-env",
{
targets: {
chrome: "79", // 크롬 79까지 지원하는 코드를 만든다
ie: "11", // ie 11까지 지원하는 코드를 만든다
edge: "17",
firefox: "60",
chrome: "67",
safari: "11.1",
},
},
],
],
}
바벨은 ECMAScript2015+를 ECMAScript5 버전으로 변환할 수 있는 것만 빌드한다.
그렇지 못한 것들은 Polyfill
추가해서 해결한다.
즉 Polyfill
은 ECMAScript5 버전으로 대체 못하는 것들을 위한 코드이다.
폴리필(polyfill)
은 웹 개발에서 기능을 지원하지 않는 웹 브라우저 상의 기능을 구현하는 코드를 뜻한다.
👉 es5문법으로 대체하지 못하여 es5로 같은 기능을 구현했다.
This means you can use new built-ins like
Promise
orWeakMap
, static methods likeArray.from
orObject.assign
, instance methods likeArray.prototype.includes
, andgenerator functions
(provided you use the regenerator plugin). The polyfill adds to the global scope as well as native prototypes likeString
in order to do this.
useBuiltIns
option으로 polyfill을 설정할 수 있다.
useBuiltIns
"usage" | "entry" | false(defaults)
This option configures how@babel/preset-env
handles polyfills.
@babel/polyfill
was deprecated
Since
@babel/polyfill
wasdeprecated
in 7.4.0, we recommend directly addingcore-js
and setting the version via thecorejs option
.
더 자세한 정보를 원하면 링크를 클릭하세요. @babel/polyfill deprecated
폴리필 사용 방식 설정을 해주려면
1. core-js
를 설치해준다. npm i core-js@3
2. babel.config.js
에서 useBuiltIns
옵션과 corejs
옵션을 설정해준다.
// babel.config.js:
module.exports = {
presets: [
[
"@babel/preset-env",
{
useBuiltIns: "usage", // 폴리필 사용 방식 지정
corejs: {
// 폴리필 버전 지정
version: 2,
},
},
],
],
}
npm install -D babel-loader @babel/core @babel/preset-env webpack
// webpack.config.js:
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader', // 바벨 로더를 추가한다
options: { // presets , pluigns 둘다 사용가능
presets: ['@babel/preset-env'],
plugins: ['@babel/plugin-proposal-object-rest-spread']
}
}
}
]
}
폴리필 사용 설정을 했다면 core-js도 설치해야한다. 웹팩은 바벨 로더가 만든 아래 코드를 만나면 core-js를 찾을 것이기 때문이다.
require("core-js/modules/es6.promise")
require("core-js/modules/es6.object.to-string")
npm i core-js@3
그리고 웹팩으로 빌드
npm install --save-dev @babel/core @babel/cli @babel/preset-env
npm install --save @babel/polyfill `deprecated`
npm install -save core-js@3
babel.config.js 작성 -> webpack.config.js 작성 -> webpack으로 빌드
//babel.config.js
const presets = [
[
"@babel/env",
{
targets: {
ie: "11", // ie 11까지 지원하는 코드를 만든다
edge: "17",
firefox: "60",
chrome: "67",
safari: "11.1",
},
useBuiltIns: "usage", // 폴리필 사용 방식 지정
corejs: {
// 폴리필 버전 지정
version: 3,
},
},
],
];
module.exports = { presets };
//webpack.config.jc
module.exports = {
...
module: {
rules: [
...
//babel-loader
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"],
},
},
],
},
...
};
https://babeljs.io/docs/en/
https://ko.wikipedia.org/wiki/%ED%8F%B4%EB%A6%AC%ED%95%84_(%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D)
https://jeonghwan-kim.github.io/series/2019/12/22/frontend-dev-env-babel.html#6-%EC%9B%B9%ED%8C%A9%EC%9C%BC%EB%A1%9C-%ED%86%B5%ED%95%A9