Frontend Skills -Babel 설치하기, 그리고 spread operator es5코드로 바꾸기

Frontend Skills:

Babel 설치하기, 그리고 spread operator es5코드로 바꾸기

| Babel 전역적으로 설치

• npm install babel-cli -g

| spread operator가 사용된 코드를 es5 코드로 바꿀 js파일 생성

# script.js

window.onload = function() {

var btn = document.querySelector(".btn");

var obj = {

test: 1,

test: 1,

test: 1

};

let code;

btn.addEventListener("click", function() {

alert("Hello world");

code=({ ...obj });

});

};

| spread operator 관련 플러그인 설치

: spread operator는 es7 문법이므로 기본 preset es2015 로는 해결이 안됨

https://babeljs.io/docs/en/babel-plugin-transform-object-rest-spread/ 참고

• npm install --save-dev babel-plugin-transform-object-rest-spread

• .babelrc파일 생성 후 아래와 같이 넣어줌

{

"plugins": ["transform-object-rest-spread"]

}

• package.json 파일에 script 추가( babel이 전역적으로 깔려 있기에 가능) 

: script.js 파일에 있는 코드를 lib 폴더안에 es5코드로 바꿔서 넣어줌

"start": "babel script.js -d lib"

{

"name": "serverexample",

"version": "1.0.0",

"description": "",

"main": "script.js",

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1",

"start": "babel script.js -d lib"

},

"author": "",

"license": "ISC",

"devDependencies": {

"babel-plugin-transform-object-rest-spread": "^6.26.0"

}

}

• 명령어 실행결과

바뀐 코드

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

window.onload = function () {

var btn = document.querySelector(".btn");

var obj = {

test: 1,

test: 1,

test: 1

};

let code;

btn.addEventListener("click", function () {

alert("Hello world");

code = _extends({}, obj); //es5 코드로 바뀜

});

};