Transpilation

At this point, you are familiar with ES6+ browser compatibility issues and how to address them with transpilation.

(ES6+ 브라우저의 호환성 이슈를 다룰 것이고, 그것들을 어떻게 변환하는지 익숙해졌다.)

In this project, you will practice setting up a JavaScript directory with Babel to transpile ES6+ code to ES5.

(이 프로젝트에서는, ES6+ 코드를 ES5로 변환하기 위해서 자바스크립트 디렉터리를 설정하는 연습을 할 것이다.)

Before you begin, take note of the chart to the right. The first column displays the percentage of web browsers that support the ES6+ syntax in the second column. At the end of this project, we will populate the third and fourth columns with the equivalent ES5 syntax and the percentage of web browsers that recognize it.

(시작하기 전에, 오른쪽 차트를 기록해두어라. 첫 번째 열은 두 번째 열에서 ES6+ 구문을 지원하는 웹 브라우저의 백분율을 표시한다. 이 프로젝트가 끝나면, 세 번째와 네 번째 열에 동등한 ES5 구문과의 차이를 인식하는 웹 브라우저의 백분율로 채운다.)

Because this is a short project and knowing the steps to set up Babel is important, we recommend you complete it a couple of times. Also, if you’re stuck and think you may have typed the wrong command, select the reset project button and start from the beginning.

(이 프로젝트는 짧은 프로젝트이기 때문에, Babel 을 설정하는 단계를 중요하다. 막힌다면, 재설정을 하고 처음부터 시작해보는 등 많은 연습을 해보도록 하자.)

1. package.json 파일을 만들고, 해당 코드를 입력한다.

• name — babel-project
• description — Transpile code in a Babel project.

npm init
// package.json을 만든다.

2. Babel 명령 라인을 설치하고, Babel preset 환경 npm 패키지를 설치한다.

또한, package.json에 devDependencies 프로퍼티를 추가한다.