Babel-practice(4)-preset *

@babel/core, @babel/cli, plugins 를 이용하여 transpile 해보기

코드보기

ECMAScript 5, 6, 2016+, next, intl, non-standard compatibility table

Env Preset

1. 관련 플러그인들을 모아 놓고 한번에 적용하기 위해서 미리 플러그인들을 모아 놓은 것

2. ECMAScript 년도별로 모아 놓은 것들, stage(level-0,1,2,3) 별로 모아 놓은 preset, third-party preset 등 종류가 다양하다.

3. Env Preset은 stage 3 Level 이상되는 문법의 플러그인들을 설치한다.

4. Env Preset은 다양하고 편리하게 설치되는 플러그인들을 설정할 수 있다. (babel.config.json)

---

1. 설치

$ npm i -D @babel/core @babel/preset-env @babel/cli

개발 환경에 맞는 것들을 설치하는 것이 중요하다.

여기서  cli는 테스트를 위해서 설치했다. 

2. 플러그인 항목을 확인[MAC]

$ npm list --depth=1 | grep "@babel/plugin"

---

설정 및 변환 작업

[webpack.config.js]

1. 기본 설정 [babel.config.01.json]

   예시를 위해 01로 만들었다. 본래에는 01을 없애고 만들면된다. 

• 설정

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "targets": {
                    "node": "current"
                }
            }
        ]
    ]
}

node:current 는 버전을 나타낸다.

• 변환

$ npx babel src/ex01.js -o dist/ex01.01.js

---

2. plugin 설정 [babel.config.02.json]

• 설정

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "targets": {
                    "node": "current"
                }
            }
        ]
    ],
    "plugins": [
        "@babel/plugin-transform-for-of",
        "@babel/plugin-transform-template-literals",
        "@babel/plugin-transform-parameters",
        "@babel/plugin-transform-block-scoping"
    ]
}

실제로는 플러그인들을 이렇게 다 하나하나 적용하지는 않는다.

• 변환

$ npx babel src/ex01.js -o dist/ex01.02.js

---

3. 브라우저 타켓 설정 [babel.config.json] *

브라우저 ES6호환 테이블을 참고하여 버전을 넣는다.

• 설정

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "targets": {
                  	"ie": "11",
                    "edge": "89",
                    "firefox": "92",
                    "chrome": "90",
                    "opera": "76",
                    "safari": "15"
                }
            }
        ]
    ]
}

• 변환

$ npx babel src/ex01.js -o dist/ex01.03.js

---

결과

ES6 -> ES5 로 내린다. ES6을 지원하는 브라우저의 경우에는 변경이 되지 않지만 그렇지 않을 경우에는 ES5로 내려준다.