2. Bable 을 이용한 ES6 변환

Babel 을 이용한 ES6 변환

1. node.js 설치

2. package.json 생성

• npm init 실행

PS D:\study\es6> npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (es6)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to D:\study\es6\package.json:

{
  "name": "es6",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this OK? (yes)

• package.json 내용

3. Babel CLI 설치

• npm install --save-dev @babel/core @babel/cli

PS D:\study\es6> npm install --save-dev @babel/core @babel/cli
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN es6@1.0.0 No description
npm WARN es6@1.0.0 No repository field.

+ @babel/core@7.10.4
+ @babel/cli@7.10.4
added 192 packages from 125 contributors and audited 193 packages in 11.626s

3 packages are looking for funding
  run `npm fund` for details

found 42 low severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details

• Babel CLI를 global 하게 설치할수 있으나 프로젝트별로 설치하는게 더 나음

1. 동일한 컴퓨터내 다른 프로젝트는 서로 다른 버전의 Babel이 존재하게 되어 각각 업데이트 할 수 있음.
2. 이는 작업중인 환경에 대한 종속성이 없음을 의미함 프로젝트를보다 이식 가능하고 설정하기 쉽게 만듬.

• 설치가 끝나면 package.json 파일에 다음과 같은 구문이 포함되어야 함

  "devDependencies": {
    "@babel/cli": "^7.10.4",
    "@babel/core": "^7.10.4"
  }

4. package.json 내에 npm script 명령 추가

• Babel을 사용하여 ES6+ 코드를 ES5 이하의 코드로 트랜스파일링하기 위해 Babel CLI 명령어를 사용할 수도 있으나 npm script를 사용하여 트랜스파일링

• "scripts" 필드를 package.json 내에 추가

      "scripts": {
        "build": "babel src -d dist"
    },

1. src : 타겟 폴더
2. -d 폴더명: 변환된 소스를 "폴더"에 저장

5. .babelrc 파일 생성

• 프로젝트 root에 .babelrc 파일을 생성하고 몇개의 plugin들을 사용할수 있도록 설정해야함
• env preset 설치
• npm install @babel/preset-env --save-dev

PS D:\study\es6> npm install @babel/preset-env --save-dev
npm WARN es6@1.0.0 No description
npm WARN es6@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ @babel/preset-env@7.10.4
added 99 packages from 25 contributors and audited 292 packages in 9.16s

6 packages are looking for funding
  run `npm fund` for details

found 266 low severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details

• 기능 활성화를 하기 위해 .babelrc 파일에 설정을 추가

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

7. src 폴더에 ES6로 만들어진 JS파일을 만든 후 콘솔창에서 "npm run build"를 실행하면 dist 디렉토리에 변환된 js파일이 생성

• /src/main.js

const variable = 'A';

PS D:\study\es6> npm run build
> es6@1.0.0 build D:\study\es6
> babel src -d dist

Successfully compiled 1 file with Babel (660ms).

• /dist/main.js

'use strict';

var variable = 'A';