브라우저의 종류는 다양하다.
때문에 사람들이 최신 브라우저인 크롬만 사용하지는 않는다.
구형 브라우저에서도 돌아갈 수 있는 조치가 필요하다.
이를 위해서 바벨을 사용한다.
바벨을 사용하면 최신 문법의 코드를 옛날 방식으로 바꿔주기 때문에
나이스한 자바스크립트 문법을 마구 사용하더라도 문제가 생길 걱정을 덜 수 있다.
심지어 요즘 웹 개발자들에게 골치를 썩이는 인터넷 익스플로러 11까지도 말이다.
대신 폴리필과는 구분해야 한다.
Promise와 같은 메소드는 바벨을 사용한다고 해결되지 않는다.
구형 브라우저에는 Promise라는 빌트인 객체가 아얘 존재하지 않기 때문이다.
append나 remove 역시 마찬가지다.
Dom Element 객체에 prototype 메소드가 포함되어 있지 않아(아마도?) 구형 브라우저에서 사용하면 에러가 발생한다.
이를 해결하기 위해 promise 폴리필을 위한 코드와
www.npmjs.com/package/promise-polyfill
append나 remove의 폴리필을 위한 코드를 추가해 줘야 한다.
developer.mozilla.org/en-US/docs/Web/API/ParentNode/append
developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove
그러나 요즘 바벨은 폴리필까지도 처리해준다.
바벨의 매뉴얼을 참고해서 처음부터 바벨의 자체 폴리필까지 사용하는 방법을 정리해 보겠다.
1. 터미널에서 프로젝트의 폴더에 들어가 다음 명령어를 입력한다.
npm install --save-dev @babel/core @babel/cli @babel/preset-env
npm install --save @babel/polyfill
2. 프로젝트의 root 경로에 babel.config.json 파일을 생성하고 다음 내용을 저장한다.
{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"edge": "17",
"firefox": "60",
"chrome": "67",
"safari": "11.1",
"ie": "11"
},
"useBuiltIns": "usage",
"corejs": "3.6.4"
}
]
]
}
targets에 적은 브라우저의 버전에서 사용 불가능한 코드를 변환해준다.
useBuiltIns를 usage로 설정하면 바벨이 코드를 검사하고
targets 환경에서 없으면 안 될 것만 자동으로 폴리필 해준다.
build된 파일을 보면 이런식으로 불러온다.
require("core-js/modules/es.promise");
corejs는 폴리필로 사용하는 core-js의 버전을 명시한다.
core-js는 폴리필로 가장 유명한 라이브러리다.
(useBuiltIns에 종속된 속성이다.)
3. root 경로의 src 폴더에 js 파일들을 생성해서 새로 나온 문법들을 사용해본다.
4. package.json에 다음을 추가한다.
"scripts": {
"build": "./node_modules/.bin/babel src --out-dir lib"
},
5. npm run build 명령어를 입력한다.
src 폴더의 js 파일들이 lib 폴더에 바벨이 적용된 채로 새로 생성된다.