바벨이란,
구형 브라우저나 환경에서 ES6 이상의 기능들을 사용하기 위해서 이전 버전의 자바스크립트 버전으로 변환해주는 는 도구.
es6는 2015.06년도에 등장,
브라우저들은 언제 적용?
크롬 - 2016.05
파이어폭스 - 2017.03
마소 엣지 - 2016.08
사파리 - 2016.09
오페라 - 2016.06
IE - X
1년에서 2년 정도의 기간 소요되었는데 이 기간 동안 사용을 못 했을까?
babel을 이용해서 브라우저들의 환경에 맞게 es6를 es5 로 다운그레이드하여 사용.
babel 사용법,
const fn = () => "바벨";
위 화살표 함수를 트랜스파일링을 하려면 3가지 필요.
@babel/core : 바벨의 핵심적인 기능
@babel/cli : 터미널로 바벨을 사용
@babel/plugin-transform-arrow-funtions: 화살표 함수를 transform하는 플러그인
var fn = function fn () { return "바벨"; };ES6에서 추가된 const와 arrow function이 transform
매번 번거롭게 babel 플러그인을 설치해야하나?
config 파일을 사용, babel.config.json 또는 .babelrc.json 파일
Preset 활용 - Preset이란? 다양한 플러그인들을 한 곳에 모아놓은 것
바벨 프리셋을 사용하면 매번 플러그인을 설치할 필요 없이, 한번에 바벨 트랜스파일링 실행 가능.
{ "presets" : [ [ "@babel/preset-env", { "targets" : { "edge" : "17", "firefox" : "60", "chrome" : "67", "safari" : "11.1" }, "useBuiltins" : "useage", "core.js" : "3.6.5" } ] ] } targets - 어떤 브라우저와 버젼을 타겟으로 할지 지정. useBuiltins - @babel/preset-env 가 어떻게 폴리필을 핸들링할지 설정하는 옵션, 기본값은 false useBuiltins : entry - 각 브라우저의 버젼에 존재하지 않는 기능을 위한 모든 폴리필을 가져옴 - core-js와 같은 폴리필 라이브러리를 수동으로 코드의 시작 부분에 추가해야함. useBuiltins : usage - 코드에서 실제로 사용되는 기능을 기준으로 필요한 폴리필만 자동으로 포함 - 개발자가 직접 폴리필을 import하지 않아도 됨. 코드의 크기를 줄이는 데 유용.
바벨 플러그인 또는 프리셋을 이용해서 트랜스파일링을 한다고 하여도 모든 기능들을 다 사용하지 못 함.
ex. Promise, Array.prototype.includes 등은 es5에 존재하지 않음.
그러면 Promise같은 것들을 사용 못 하나?
폴리필을 통해서 사용 가능.
폴리필은 런타임에서 지정된 타겟 환경에 필요한 빌트인 객체나 메서드가 존재하지 않는 경우, 이를 확인하고 ECMAScript 최신 환경을 맞추기 위해 필요한 코드들을 삽입함. 이는 주로 최신 자바스크립트 기능을 구형 브라우저에서도 사용할 수 있도록 도와줌.
@babel/polyfill은 Babel 7.4.0부터 사용하지 않음.
대신에 core-js를 사용.
core-js 단독 사용?
includes나 instanceof 메서드 등 동작함.
하지만 전역 스코프 오염의 가능성이 있음.
전역에 존재하지 않는 메서드들이나 빌트인 객체를 사용하기 때문에 전역 스코프가 오염 될 수 있음.
외부 라이브러리와 충돌 가능성.
@babel/plugin-transform-runtime + core-js(버전 명)를 사용해서 전역 스코프 오염을 방지.
{
"presets" : [[
"@babel/preset-env"
]],
"plugins" : [
["@babel/plugin-transform-runtime", {
"core-js": 3
}
]
]
}플러그인을 설치하고 core-js의 버전을 명시하면, core-js-pure 패키지에 폴리필 삽입.
하지만 위의 방법도 문제가 발생할 여지가 있음.
프로젝트 내 패키지 중에서 전역 스코프에 의존하는 패키지가 있다면?
예를 들어 axios는 전역에 존재하는 Promise에 의존, node_modules에 존재하는 axios가 트랜스파일링 되지 않으면 문제 발생.
해당 패키지를 포함해서 트랜스 파일링 진행 필요.
babel.config.json,
여러 패키지 디렉토리를 가진 프로젝트에서 하나의 바벨 설정을 적용하고 싶을 때
node_modules도 적용하고 싶을 때
.babelrc.json,
프로젝트 내에 서드 파티 라이브러리가 바벨에 의해 트랜스폼 되기를 바라지 않는 경우
특정 부분만 적용하고 싶을 때
바벨 로더에 대해서 추가 기술 할 것.
댓글