PDH 개발 공부

Env Preset 관련 플러인들을 모아 놓고 한 번에 적용하기 위해서 미리 플러그인들을 모아 놓은 것 ECMAScript 년도별로 모아 놓은 것들, stage(0, 1, 2, 3) 레벨별로 모아 놓은 프리셋, 3rd party 프리셋(typescript, react)등 종류가 다양하다. Env Preset은 stage 3 레벨 이상되는 문법의 플러그인들을 설치한다. Env Preset은 다양하고 편리하게 설치되는 플러그인들을 설정할 수 있다.(babel.config.json) 설치 설치 $ npm i -D @babel/core @babel/preset-env @babel/cli 플러그인 항목 확인 $ npm list --depth=1 | grep "@babel/plugin" 설정 및 변환 기본 설정[b..

이 방법은 각각 선택해서 변경 할 수 있는 방법이다. babel plugin 설치 $ npm i -D @babel/core @babel/cli 소스 파일 작성(EX6) 플러그인 적용 블록 스코프 변수 변환(@babel/plugin-transform-block-scoping) $ npm i -D @babel/plugin-transform-block-scoping $ npx babel src/ex01.js -o dist/ex01.01.js --plugins @babel/plugin-transform-block-scoping $ cat dist/ex01.01.js 객체분해-파라미터 변환(@babel/plugin-transform-parameters) $ npm i -D @babel/plugin-transfor..

Babel 이란? 웹 애플리케이션 기반 기술 중 하나로 입/출력이 모두 자바스크립트 코드인 컴파일러 초기의 바벨은 ES6 코드를 ES5 코드로 변환해 주는 컴파일러였으나, 현재는 바벨을 이용해서 리액트 JSX 문법, 타입스크립트, 코드 압축,제안(proposal) 단계에 있는 문법 등을 사용할 수 있음 Core 라이브러리 변환 규칙을 소스에 적용해서 변환 파일을 생성한다. 변환 규칙은 가지고 있지 않다 바벨 플러그인이 변환 규칙을 가지고 있다. 코어 라이브러리 설치 $ npm i -D @babel/core 코어 라이브러리 사용해보기 const babel = require('@babel/core'); const result = babel.transform("const fn = () => 1;", {}); ..