[ VanillaJS ] babel 설정
바벨 babel
하위버전 브라우저에서 실행할 수 있도록 코드를 변환( transpiling )하는 라이브러리
yarn add -D @babel/core @babel/cli @babel/preset-env
- @babel/core
- 이 라이브러리가 프로젝트 config 바탕으로 코드를 변환한다.
- @babel/cli
- 커맨드(명령어)로 파일 코드변환을 할 수 있다.
- @babel/preset-env
- 필수적인 plugin들이 모여 있다.
babel.config.json
파일
{
"presets": [
[
"@babel/preset-env",
{
"targets": "> 0.5%, not dead",
"useBuiltIns": "usage",
"corejs": { "version": 3, "proposals": true }
}
]
],
"plugins": []
}
targets
전세계 0.5%범위에서 사용되는 브라우저에서 동작가능하도록 설정했다.
"useBuiltIns": "usage"
내가 필요한 모듈만 가져온다.
corejs
아래 polyfill 관련 설정이다.
polyfill
string.replaceAll 등 기존 함수를 재정의 하는 것
초기 브라우저에서 조사해서 필요한 함수가 없다면 아래와 같이 prototype에 함수를 정의해준다.
yarn add core-js@3
@babel/polyfill은 deprecated되었기에 core-js 버전3를 설치하자.
전역공간 오염 문제, 바벨 런타임 플러그인의 인스턴스 메소드 문제가 있다고 한다.
( 주의 ! ) 사용자 브라우저 런타임에서 실행되기에 devDependencies가 아닌 dependencies에 설치해줘야 한다.
보통 webpack
에서 babel-loader
를 통해서 js파일을 babel로 코드 변환한다.
Author And Source
이 문제에 관하여([ VanillaJS ] babel 설정), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@bepyan/VanillaJS-babel-설정저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)