구성할 수 있는 짧은 바벨 메모!

Javascript 개발자라면 언젠가 Babel에 대해 들어봤을 가능성이 매우 높습니다.
대부분의 경우 직접 구성할 필요가 없습니다. 기본 구성과 함께 제공되는 스타터 또는 일부 상용구를 사용하는 것이 매우 일반적이기 때문입니다.
그러나 때때로 우리는 그것을 파고들 필요가 있고 그것이 제 경우입니다. 저는 그 모든 설정을 기억하는 것이 끔찍하고 그것으로 시간을 낭비하기가 매우 쉽습니다. 그래서 이 포스트는 단순히 Babel 사용에 대한 메모 노트를 공유하는 것입니다.

간단한 알림: 바벨이란 무엇입니까?

Babel은 JavaScript 컴파일러입니다. 이것은 주로 대부분의 환경과 브라우저에서 코드를 Javascript 호환 버전으로 변환하는 데 사용됩니다.

공식 문서의 예:

// Babel Input: ES2015 arrow function
[1, 2, 3].map(n => n + 1);

// Babel Output: ES5 equivalent
[1, 2, 3].map(function(n) {
  return n + 1;
});

바벨 설치

바벨 설치:

npm install --save-dev @babel/core @babel/cli @babel/preset-env

프로젝트에는 babel 구성 파일이 필요합니다.
2 가지 유형이 있습니다.

프로젝트 전체 구성

babel.config.* 파일, 확장자는 .json , .js , .cjs , .mjs .

파일 관련 구성

.babelrc.* 파일, 확장자는 .json , .js , .cjs , .mjs .

.babelrc 확장자가 없는 파일입니다.

package.json 파일, "babel" 키 포함.

무엇을 선택하든 이 파일에는 사전 설정과 플러그인이 포함되어 있습니다.
사전 설정 및 플러그인은 코드 변환을 적용하는 데 사용됩니다.

예를 들어 플러그인@babel/plugin-transform-arrow-functions은 배열 함수를 ES5 호환 함수 표현식으로 변환하는 데 사용됩니다.

const fn = () => 1;

// converted to

var fn = function fn() {
  return 1;
};

사용하는 방법

babel을 사용하려면 먼저 각 프리셋 또는 플러그인을 설치해야 합니다.

최신 Javascript를 사용해야 하는 경우 사전 설정 환경이 필요합니다.

npm install --save-dev @babel/preset-env

Typescript를 Javascript로 컴파일하려면 다음을 사용하십시오.

npm install --save-dev @babel/preset-typescript

또는 React.js: 사전 설정 반응

npm install --save-dev @babel/preset-react

구성 파일(여기서는 babel.config.json 모델)에서:

{
  "presets": ["@babel/preset-typescript", "@babel/env", "@babel/preset-react"],
  "plugins": ["@babel/plugin-transform-arrow-functions"]
}

일부 옵션은 특정 사전 설정 및 플러그인에서 사용 가능할 수 있음을 잊지 마십시오! (문서 참조).

마지막으로 예를 들어 Typescript 코드를 컴파일합니다.

npx babel index.ts --out-file ./dist/index.js

일부 사람들이 프로젝트 구성에 어려움을 겪는 데 도움이 되기를 바랍니다. 좋은 하루 보내세요.

Source