이제 바벨사용을 해 볼꺼임

출처 - https://www.daleseo.com/js-babel/

npm install -d @babel/core @babel/cli @babel/preset-env

개발의존성으로 설치 (devDeoendencies / D)
-> 개발의존성으로 설치하는 이유는 Babel은 애플리케이션이 실행 시에 필요한 것이 아니라 빌드 시에만 필요하기 때문이다. @babel/core는 핵심모듈로 babel 항상 필요한 패키지이고, @babel/cli는 터미널에서 커맨드를 입력해서 Babel을 사용할 때 필요한 패키지이다.

*test.js
const arr= [1,2,3,4,5]
const result= arr.map(n => n*n)
npx babel test.js --presets=@babel/env

-> test.js이 presets에 종속된 플러그인 패키지를 읽어서 arrowfunction이 일반 function으로 빌드됨.

BABEL 설정 파일

매번 옵션을 붙여 설정하면 번거롭기 때문에 babel.config.js(node_modules) / .babelrc(한 프로젝트)를 사용해 babel을 설정함.

매번 볼때마다 새로운 은수에겐 항상 궁그만게,, 겁나 많음.. 그래서 또 찾아봄
config파일이 먼데 패키지마다 하나씩 꼭 있는지,, 먼가 버전관리하는 패키지 제이슨 같은느낌인데.. 구글링 해보니 위키백과에 나옴.

configure 스크립트

configure 스크립트는 개발 중인 프로그램을 각기 다른 수많은 컴퓨터들에서 실행하고 도와주도록 설계된 실행 스크립트이다. 소스 코드로부터 컴파일하기 직전에 사용자 컴퓨터의 라이브러리의 존재 여부를 확인하고 연결시킨다.

packages.json (모드 모듈 모든 버전관리) / babel.config.json (바벨 설정 관리)

.babelrc 사용하기

.babelrc 파일을 만들어 presets에 @babel/env 를 설정해주면 뒤에 옵션을 붙이지 않아도 preset이 적용됨

 npx babel before.js  
"use strict";

var arr = [1, 2, 3, 4, 5];
var result = arr.map(function (n) {
  return n * n;
});

before.js 빌드해줌

 npx babel test1_before -d test1_after

test1_before에 있는 모든 폴더들을 test1_after에 있는 디랙토리로 다 빌드해줌.

와 겁나신기한데,,, 신기해잉 먼가 리액트돌아가는 꼴을 알 수 도 있다는 희망이 생김,, 싱기해잉,,

NPM 스크립트 설정

 "scripts": {
    "build": "babel test1_before -d test1_after"
  }

scripts항목에 다양한 명령어를 설정해놓고 실행할 수 있다. 그래서 react package.json에 yarn start를 입력했을 때, 페이지가 열리는 이유가 start를 입력했을 때 열리도록 명령어가 저장되어 있어서임. ㅇㅇㅇㅇ 무슨뜻인지 저만 알 수 있음 ㅎㅎㅎ 아무튼 scripts 에서 명령어를 컨트롤 할 수 있다는 뜻임.