JavaScript/Traversy Media - ES6 - 1. Introduction, 2. Compile ES6 With Babel

1. Introduction

 

 

 

2. Compile ES6 With Babel

node.js 설치

 

babel 사이트에서

workspace에 ES6 폴더를 만들고

※ ES6가 아니라 최신으로 해야할듯

 

그 폴더에 대고 shift+우클릭 또는 그냥 우클릭을 해서

power shell이나 git bash를 연다.

 

npm init

※ 여기서는 붙여넣기가 Ctrl+v가 아니라 Shift+Insert이다.

뭐라고 뭐라고 나오는데 다 엔터 친다.

 

VS code로 ES6 폴더를 열면

package.json 파일이 있다.

(1) Babel CLI를 설치

(2) Babel preset for ES6 2015를 설치

 

git bash에서

npm install babel-cli babel-preset-es2015 --save-dev

※ ES6가 아니라 최신으로 해야할듯

※ 여기서는 붙여넣기가 Ctrl+v가 아니라 Shift+Insert이다.

설치를 하면 12행과 13행이 추가된다.

ES6 폴더에 .bablerc라는 파일을 만든다.

 

그 파일 안에 다음과 같이 쓰고 저장한다.

※ ES6가 아니라 최신으로 해야할듯

 

{
    "presets": [
        "es2015"
    ]
}

 

 

ES6 폴더에 src 폴더를 만든다.

 

 

그 안에 main.js 파일을 만든다.

여기에 ES6 코드를 쓰면 된다.

 

 

폴더를 하나 더 만든다.

이름은 마음대로.

컴파일된 앱이 위치할 폴더이다.

 

 

package.json 파일의 7행을 

"build": "babel src -d dist" 로 바꾼다.

 

9~11행 추가

 

src 폴더의 main.js에 이렇게 저장하고

 

 

 

npm run build를 하면

 

dist 폴더에 main.js 파일이 생기고 ES5로 compile된 것이 들어있다.

 

다른 것도 해보자

 

class User{

    register(){

        console.log('User Registered...')

    }

}

 

 

youtu.be/2LeqilIw-28