React 및 Node로 애플리케이션을 빌드합니다. ES6에서 React 코드를 작성하지만 Node 백엔드 코드를 방문하면 ES5에서 작성하게 됩니다. 변경 사항과 require 방법으로 인해 이것이 상당히 짜증나는 것을 발견했습니다. ES5 Node를 작성하는 것이 편하다고 느끼신다면 이 블로그를 건너뛰셔도 됩니다. 하지만 우리가 deno를 알아내기 위해 기다리는 동안 프런트엔드와 백엔드 전환을 아주 매끄럽게 만들고 싶다면 운이 좋은 것입니다. 왜냐하면 제가 모든 단계를 안내해 드릴 것이기 때문입니다. 당신은 착수해야 할 것이고 Github에 이미 기존 NodeJS ES6 템플릿 설정이 있습니다.

전제 조건

ES6 표준에서 JS 작성에 대한 기본 지식

기본 expressjs 개념

시작하자

일반적인 작업은 코드를 보관할 새 폴더를 만들고 디렉토리를 폴더로 변경하는 것입니다.

$ mkdir node_api_es6_template && cd $_

종속성을 추적하기 위한 package.json 파일 생성

$ yarn init -y
// or
$ npm init -y

어떤 명령이든 편안하게 사용할 수 있지만 이 프로젝트 전체에서 원사를 사용할 것입니다. 항상 npm과 비슷하지만 스테로이드를 사용합니다.

ES6 코드를 ES5로 변환하려면 babel 패키지 몇 개를 설치해야 합니다.

$ yarn add babel-core babel-eslint babel-plugin-transform-runtime babel-preset-es2015 babel-preset-stage-1 babel-register

특정 babel 구성을 포함하는 .babelrc 파일을 생성합니다. 이러한 구성은 babel이 특정 ECMAScript 표준으로 트랜스파일하도록 지시합니다.

$ touch .babelrc

모든 구성을 나타내는 JSON을 파일 내부에 추가해 보겠습니다.

{
    "presets": [
        "es2015",
        "stage-1"
    ],
    "plugins": [
        "transform-runtime"
    ]
}

package.json 파일, 특히 script 키(실행할 수 있는 노드 스크립트 집합 정의)를 편집해야 합니다.

{
  "name": "nodejs_blockchain_app",
  "version": "1.0.0",
  "main": "src",
  "scripts": {
    "test": "./node_modules/.bin/mocha --require @babel/register",
    "start": "node .",
    "dev": "nodemon -i \"*.test.js\" .",
  },
  "author": "wachira",
  "license": "MIT",
  "dependencies": {
    "babel-core": "^6.26.3",
    "babel-eslint": "^10.0.3",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-1": "^6.24.1",
    "babel-register": "^6.26.0",
  }
}

test 명령을 사용하면 ES6 표준으로 작성된 테스트를 실행할 수 있습니다

.

start는 생산 모드에서 서버를 실행할 수 있도록 합니다

.

dev는 nodemon CLI 도구를 사용하여 개발 모드에서 서버를 실행할 수 있도록 합니다.

전체 노드/익스프레스 서버가 완벽하게 실행되도록 몇 가지 패키지를 설치할 것입니다.

$ yarn add express body-parser chalk

express는 웹 및 모바일 응용 프로그램을 위한 강력한 기능 집합을 제공하는 최소한의 유연한 Node.js 웹 응용 프로그램 프레임워크입니다. 웹 서버를 더 빠르게 가동할 수 있습니다.

body-parser는 Node.js 본문 구문 분석 미들웨어입니다. 전체 CRUD API에서 작업하기로 결정하면 이 기능이 유용할 것입니다.

chalk 다채로운 Nodejs 로그 지원

코딩을 해보자

모든 노드 API 코드를 저장할 src 폴더를 생성합니다.

$ mkdir src

내부에서 우리는 서버 코드를 저장하기 위한 파일과 ES6 코드를 트랜스파일하기 위한 두 개의 파일을 생성합니다.

touch app.js && touch index.js

선호하는 편집기로 src/app.js 파일을 열고 일부 코드를 추가해 보겠습니다.

"use strict";

import express from "express";
import bodyParser from "body-parser";
import cors from "cors";
import dotenv from "dotenv";
import chalk from "chalk";

const app = express();

// Configure Dotenv to read environment variables from .env file
// automatically
dotenv.config();

// Define json body reader
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.use(express.static(__dirname, { dotfiles: "allow" }));

// Enable proxy x-Forwadded-*
app.enable("trust proxy");

// Enables CORS
app.use(cors());

// Set port
app.set("port", process.env.PORT || 5000);

// Initialize server
app.listen(app.get("port"), err => {
  if (err) {
    console.log(chalk.red(err.message));
  } else {
    console.log(chalk.green(`Server is running on port ${app.get('port')}`));
  }
});

다음으로 src/index.js를 열고 두 줄의 코드를 추가합니다.

// Imports the babel library to transpile our code
require("babel-core/register")

// Import our server code
exports = module.exports = require("./app")

코드를 추가한 후 익스프레스 서버를 가동해 보겠습니다.

$ yarn dev
// or
$ yarn start

콘솔에 녹색 로그가 표시되어야 합니다.



그렇지 않으면 설명 오류 메시지와 함께 콘솔에 빨간색 로그가 표시됩니다.

그게 다야

엑스트라

설정에 문제가 있는 경우 myrepo를 복제하고 어디가 잘못되었는지 확인하십시오.