Nodejs 응용 프로그램에 Babel 구성

소개하다.

바벨이 뭐야?

공식babel 문서 사이트에서 Babel은 도구 체인으로 현재와 비교적 오래된 브라우저나 환경에서 ECMAScript 2015+ 코드를 뒤로 호환되는 자바스크립트 버전으로 전환하는 데 주로 사용된다.기본적으로 Babel은 Javascript 컴파일러입니다.
본고는 Babel이 최신Node.js 버전에 포함되지 않은 최신 ES6와 그 이상의 문법 기능을 어떻게 사용하는지 설명하고 보여주는 데 목적을 둔다.만약 Babel이 엔진 뚜껑 아래에서 어떻게 일을 하는지 알고 싶다면, 나는 본문의 마지막 부분에서 유용한 자원을 공유할 것이다.

프로젝트 설정

선결 조건

시작하기 전에 기계에 편집기와 터미널이 설치되어 있는지 확인하세요.이 밖에 npm가 있는 Node.js 버전을 설치해야 합니다.계속 읽기 전에 반드시 모든 것을 준비해야 한다.
우리는 하나의 가방으로 우리의 프로젝트를 초기화해야 한다.json 파일입니다. 설치에 필요한 패키지를 설치할 것입니다.

npm init -y

Note: For this tutorial, we will be making use of npm as our package manager. If you are using yarn, make sure you run the corresponding command.

노드 프로젝트를 성공적으로 초기화한 후 필요한 의존항을 설치합니다.
우선, Node에 웹 프레임워크 express 를 설치합니다.js와 nodemon 노드를 자동으로 다시 시작하는 도구입니다.파일 변경이 감지되었을 때 js 프로그램을 사용합니다.
터미널을 열고 다음 코드 세션을 추가합니다

npm install --save express
npm install --save-dev nodemon 

다음은 babel 설치에 필요한 패키지를 설치합니다.@babel/core @babel/cli를 글로벌 종속성으로 설치하는 것이 좋습니다.

npm install --save @babel/core @babel/cli

npm install --save-dev  @babel/node @babel/preset-env @babel/plugin-transform-runtime @babel/runtime @babel/polyfill

@babel/core - 모든 babel 설정/구성을 실행하는 기본 패키지입니다.
@babel/cli - 명령행/터미널에서 파일을 컴파일할 수 있는 내장형 CLI
@babel/node -babel 노드는 노드와 동일한 CLI입니다.실행하기 전에 Babel 사전 설정 및 플러그인을 사용하여 컴파일하는 js CLI 의 추가 이점

Note: You should not be using babel-node in production. It is unnecessarily heavy, with high memory usage due to the cache being stored in memory. You will also always experience a startup performance penalty as the entire app needs to be compiled on the fly.

@babel/preset-env - 최신 JavaScript를 사용할 수 있는 지능형 사전 설정으로, 대상 환경에 필요한 구문 변환(옵션인 브라우저 다각형 채우기)을 미시적으로 관리할 필요가 없습니다.이것은 당신의 생활을 더욱 가볍게 할 뿐만 아니라, 당신의 자바스크립트 가방도 더욱 작게 할 것이다.
@babel/plugin-transform-runtime - Babel의 주입 도우미 코드를 반복해서 사용하여 코드 크기를 줄일 수 있는 플러그인입니다.
@babel/runtime - 설치할 패키지는 컴파일링과 출력 사이의 중복을 피하기 위해 생산에 의존한다.
그리고 프로젝트 루트 디렉터리 .babelrc 에babel 프로필을 만들고 프로필을 기록해야 합니다.이 파일에 임의로 추가 설정을 추가하십시오

{
    "presets": ["@babel/preset-env"],
    "plugins": [
        ["@babel/transform-runtime"]
    ]
  }

완성된 후에 우리는 간단한 노드를 만들 것이다.js/Express 서버.프로젝트 루트 디렉터리에 app.js 파일을 만들고 다음 코드 블록을 추가합니다.

import express from "express";
import bodyParser from "body-parser";

const app = express();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

app.get("/", (req, res) => {
  res.status(200).json({
    message: "I am using babel in NodeJS",
    status: "success",
  });
});

const PORT = process.env.PORT || 4200;
app.listen(PORT, () => {
  console.log("server up and running");
});

우리는 이미 이렇게 멀리 갔다. 우리의 설정은 이미 준비가 되었다. 이제 우리의 코드를 실행하여 바벨이 마력을 발휘하도록 할 때가 되었다.✨package.json 파일을 열고 스크립트 태그를 다음과 같이 수정합니다.start 스크립트는 응용 프로그램 코드를 낮은 버전의javascriptnode로 컴파일하는 데 사용됩니다.js는 이해하고 노드에 쉽게 배치할 수 있습니다.js 생산 서버.start:dev 스크립트는 실행할 때 로컬에서 저희 코드를 실행하는 데 사용됩니다.clean 스크립트를 실행할 때 start 스크립트는 이전 버전 폴더를 삭제하는 데 사용됩니다.build-babel 스크립트는 앞에서 설명한 @babel/cli를 사용하여 터미널에서 코드를 컴파일합니다.
마지막으로 build 스크립트는 clean와 build-babel 명령을 동시에 실행합니다.

 "scripts": {
    "start": "npm run build && node ./build/app.js",
    "start:dev": "nodemon --exec babel-node ./app.js",
    "clean": "rm -rf build && mkdir build",
    "build-babel": "babel -d ./build ./app.js -s",
    "build": "npm run clean && npm run build-babel"
  }

마지막으로, 모든 것이 정상적인지 확인하기 위해 start 스크립트를 실행합시다.start 스크립트를 실행하면 프로젝트 루트 디렉터리에 컴파일된 build 파일을 포함하는 폴더app.js가 생성됩니다. 그림과 같습니다.

현재, 우리는 컴파일된 응용 프로그램 코드를 노드에 배치할 수 있다.js 생산 서버🎉🎉.

결론

노드에서 Babel을 구성하는 방법에 대해 배웠습니다.js 프로젝트는 최신javascript 기능을 브라우저와 다른 환경의 호환 버전으로 컴파일합니다.
만약 본문에 대해 어떤 의문이나 피드백이 있으면 언제든지 연락 주십시오.
읽어주셔서 감사합니다.

유용한 링크

https://github.com/babel/babel
https://github.com/jamiebuilds/babel-handbook
https://github.com/jamiebuilds/the-super-tiny-compiler