바벨2 바벨을 웹팩과 통합하기 웹팩으로 통합 보통 실무에서는 바벨을 직접 사용하기 보다는 웹팩으로 통합해서 사용하는 것이 일반적이다. 로더 형태로 제공하는데 babel-loader 이다. github.com/babel/babel-loader babel/babel-loader 📦 Babel loader for webpack. Contribute to babel/babel-loader development by creating an account on GitHub. github.com 사용하기 위해서 먼저 npm install babel-loader 로 babel-loader를 설치한다. 그 후 webpack.config.js 로 가서 babel-loader를 추가해 준다. // webpack.config.js module.exports.. 2021. 1. 7. 바벨 개념 및 사용법 바벨 바벨은 크로스브라우징의 혼란을 해결해 준다. 특히 ECMAScript2015+ 로 작성한 코드를 모든 브라우저에서 동작하도록 호환성을 지켜준다. 여기에는 타입스크립트나, 리액트에서 주로 사용하는 JSX처럼 다른 언어로 분류되는 것도 포함된다. 바벨의 설치는 npm install @babel/core @babel/cli 명령어로 설치한다. (@babel/cli는 바벨 명령어를 터미널에서 실행하게 해 준다.) 바벨은 총 3단계로 빌드를 진행한다. 파싱 : 코드를 AST(Abstract Syntax Tree)로 변환하는 단계이다. AST는 간단하게 말하면 코드의 프로그램을 나타내는 Node 트리 라고 할 수 있다. 변환 : AST를 변경하는 것이 변환 단계이다. 출력 : 변환된 결과물을 출력하는 단계이다.. 2021. 1. 7. 이전 1 다음