@babel/cli로 실행 & 설정

설정파일

@babel/cli에 대부분의 설정 담겨있지만, 실행환경에 따라 설정이 다른 경우에는 설정파일을 따로 만들어 관리하는 것이 좋다. 설정파일은 프로젝트 루트에 위치한다.

• .bebelrc : 지역 설정파일(local config), 바벨6 이전 버전까지 추천 설정파일 형태
• babel.config.js : 전체 설정파일(global config), 바벨7 이후 추천 설정파일 형태
• .babelrc,package.json babel 설정 > bebel.config.js : 지역 설정파일의 우선순위가 높다.

설정 값

presets & plugins

/*
 * npx babel src/code.js
 * --presets=@babel/preset-react
 * --plugins=@babel/plugin-transform-template-literals,@babel/plugin-transform-arrow-functions",
 * 
 * const 옵션명 = [설치파일명, 설치파일명...];
 *
 */


// --presets=프리셋1,프리셋2 동일
const presets = ['@babel/preset-react']; 

// --plugins=플러그인1,플러그인2  동일
const plugins = [ 
  '@babel/plugin-transform-arrow-functions',
  '@babel/plugin-transform-template-literals',
];

module.exports = { presets, plugins }; 

설정파일을 만들어 주었으니 package.json의 스크립트에서 프리셋&플러그인 관련 명령어를 제거하여준다.

"scripts": {
    "babel": "npx babel src/code.js",
}

output

지금까지 진행한 방식으로는 바벨을 통해 컴파일하여 콘솔에 출력할 수 있으나 새로운 파일로 저장하지는 못하는 상태다.
만약 새 파일에 컴파일 내용을 작성하고 싶다면 스크립트에 --out-file,--out-dir 옵션을 사용하자.

 "scripts": {
    "babel": "npx babel src/code.js --out-file dist/dist.js", // 루트 dist폴더에 dist.js로 저장
    "save-codejs" :"npx babel src --out-dir dist", // 루트 dist폴더에 cods.js로 저장
 }

--out-file, --out-dir 를 같이 사용하면 콘솔에 --out-file and --out-dir cannot be used together에러를 출력한다. 이는 기능이 겹침으로 같이 사용할 필요가 없기 때문인데,

• --out-file : 파일만 생성할 수도 있고, 폴더경로/파일명 과같이 경로설정도 가능. 즉 --out-dir 기능이 포함되어 있다,
• --out-dir : 폴더생성