Bable

jini.choi·2022년 6월 9일
0

유튜브 클론코딩

목록 보기
5/27

babel은 우리가 작성한 최신 JS를 NodeJS가 이해할 수 있는 JS로 바꿔준다.

1. 바벨 설치 바로가기
Node를 클릭 후 설치 방법 확인

2. 아래 명령어를 입력 후 설치를 하게되면 package.json에 devDependencies이 추가되어 있음
npm install --save-dev @babel/core
--save-dev 가 devDependencies에 저장한다는 명령어.
이것을 지우고 실행을 하게 되면 dependencies에 저장이 됨(큰 문제는 아님 수동으로 옮기면 됨)

devDependencies이란?
개발자에게 필요한 dependencies (dependencies는 프로젝트를 실행하기 위해 필요한 것)

자동차를 굴러가게 만드는 가솔린, 전기 = dependencies
운전자가 운전을 더 잘하기 위해 음악을 트는 것 = devDependencies

3. babel.config.json파일 생생 후 아래 소스 입력

{
  "presets": ["@babel/preset-env"]
}

4. 아래 명령어 실행
npm install @babel/preset-env --save-dev
babel에 설명을 해줘야 함
babel.config.json파일을 만들면 babel이 알아서 이 파일을 찾고 내용을 들여다 볼 것임
presets은 babel을 위한 거대한 플러그인 (preset-env이 유명- 최신 JS 쓸수 있는 플러그인)

5. bable을 어떻게 코드로 쓰는지

Nodemon 클릭 후 아래 명령어 실행(babel-node를 사용한기 위함)
npm install @babel/core @babel/node --save-dev
package.json에 script 수정(babel로 컴파일 하는 script 생성)

Nodemon

1. nodemon은 우리가 만든 파일이 수정되는 걸 감시해주는 패키지이다.
(파일이 수정되면 nodemon이 알아서 재시작 해줌)

아래 명령어 실행하여 설치
npm i nodemon --save-dev

script 수정
nodemon --exec

2. npm run dev 명령 후 js수정 할때마다 자동으로 재시작하는 것 확인 (나올 때는 ctrl+c)

profile
개발짜🏃‍♀️

0개의 댓글