ビルドし、ES 6とNODEJS APIをテストします

私と同じように、あなたはあなたのNODEJSアプリケーションをES 6を超えて使用して構築しようとしている必要があります.この記事では、ES 6を使用して基本的なAPIを構築しテストするプロセスを通してあなたをお連れします.私を信頼してください、あなたはこのポストの終わりにびっくりされます.

初めに
私はES 5を使って若干のNodeJS APIを構築しました、そして、すべては完全によく働きます、しかし、私が私がJavaScriptコードOnlineを経験するときはいつでも、私にとってなんとかクールな若干のSYNTAXを利用することができなかったので、私は満足しませんでした.私は、ES 6とそれ以降で私のコードを書くことによって実際により少ないコードでより多くをすることができるとわかりました.
ちょっと待って!ES 6 ( ECMAScript 2015 )とは
ECMAScriptはいくつかの発信技術、最も有名なJavaScript(Netscape)とJScript(マイクロソフト)に基づいています.これは、JavaScriptの標準別のWebブラウザ間でWebページの相互運用性を確保するためのものです.
定義はBookish、Es 6以降のように見えるかもしれないが、私はほんの数に言及するクールな機能の多くが付属しています.あなたのコードには、次の構文のいくつかを使用したり、使用したりしなければなりませんでした.

varの代わりにconstとletの使用.

constは、プログラムを通して変更するつもりでない定数、すなわち変数を宣言するために使用されます.これは不変の変数を作成するために使用します.

    `const tax_rate = 2.50;`

    let is used to declare mutable variables

    var is hoisted, using it may cause a program to behave unexpectedly at runtime, if care is not taken.

- The use arrow function.

// ES5
function shout() {
  console("Hurray!")
}

// ES6
const shout = () => console.log("Hurray!")

つの行に基本機能を書くことはクールです.じゃない?また、JavaScriptの組み込み関数を使用してマップを減らす、フィルタ、などのコードを読みやすく、きれいになります.例えば、

//ES5

var arr = [1,2,3,4,5,6];
var arrElements = arr.map(function (item) {
   return item;
})

//ES6

const arr = [1,2,3,4,5,6];
const arrrElements = arr.map(item => return item);

そして、最後に、インポートとエクスポートのキーワードを使用することができますmodule.export とrequire キーワード.
あなたはES 6でここで読むことができます、あなたがそれについてもっと知りたいならば、この記事の目的から没収しないために、我々は進めなければなりません.

プロジェクトの設定
まず、選択したエディタから新しいフォルダを作成します(私の場合はvscodeです).そして、次のコマンドを入力してパッケージを生成します.我々のアプリのJSONファイル:npm init -yこれはパッケージを生成します.任意の質問なしであなたのためのJSONファイル.

{
  "name": "hasnode",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

次に、我々のアプリケーションを設定するいくつかの依存関係をインストールする必要があります.次のコマンドを端末に入力します.npm install --save express morgan nodemon次に、アプリを作成します.ルートディレクトリのjsファイルを指定し、次のコマンドを入力します.

const logger  = require('morgan');
const express = require('express');

const app = express();

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

app.get('/', (req, res) => {
    res.status(200).json({
        message: "Welcome to Express"
    });
})

app.listen(8000, () => console.log('Server running at 8001'));

あなたのpackage.json , あなたの「スクリプト」に以下を加えてください

"scripts": {
 "start": "node app.js"
}

削除"main": "index.js"コードをテストするには、ブラウザ(Chrome,Mozilla,または他のブラウザ)を開きます.
localhost : 8000
ブラウザは次のように返すはずです.message "Welcome to Express"我々のコードで少し遊びましょう:
あなたのアプリケーションに移動します.JSと次のコードを置き換えます.

const logger  = require('morgan');

const express = require('express');

これで

import logger from 'morgan';

import express from 'express';

何を見ましたか.エラー?それが本当であるならば、それは非常に予想されます、あなたがそれを使うためにあなたのアプリを構成したとき、あなたはインポート声明を使うことができるだけです.そして、それは我々が今するつもりです.
ES 6構文を使用するようにプロジェクトを構成するには、いくつかの依存関係をインストールし、いくつかの設定を行う必要があります.作業を得るために以下の手順に従ってください.
その前に、srcフォルダを作成し、アプリケーションを移動します.それにJSファイル.
まず、以下のようにBabelとそのモジュールをインストールしなければなりません.npm install @babel/cli @babel/core @babel/plugin-transform-runtime @babel/preset-env @babel/register @babel/runtime @babel/node --save-dev

@babel/cli: A required install for using babel. It allows the use of Babel from the terminal and is available as ./node_modules/.bin/babel.
@babel/core: Core Babel functionality. This is a required installation.
@babel/node: This works exactly like the Node.js CLI, with the added benefit of compiling with babel presets and plugins. This is required for use with nodemon.
@babel/plugin-transform-runtime: This helps to avoid duplication in the compiled output.
@babel/preset-env: A collection of plugins that are responsible for carrying out code transformations.
@babel/register: This compiles files on the fly and is specified as a requirement during tests.
@babel/runtime: This works in conjunction with @babel/plugin-transform-runtime.

{
  "name": "hashnode-es6-node",
  "version": "1.0.0",
  "description": "",
  "scripts": {
   "start": "node app.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.1",
    "morgan": "^1.10.0"
  },
  "devDependencies": {
    "@babel/cli": "^7.13.0",
    "@babel/core": "^7.13.10",
    "@babel/node": "^7.13.10",
    "@babel/plugin-transform-runtime": "^7.13.9",
    "@babel/preset-env": "^7.13.9",
    "@babel/register": "^7.13.8",
    "@babel/runtime": "^7.13.9"
  }
}

次に、パッケージの「スクリプト」セクションに以下を追加します.JSON"babel-node": "babel-node --presets='@babel/preset-env'"ルートディレクトリで、Babelを作成します.設定.としてのJSファイル.Babelrcこれは、プロジェクトの一部だけに適用されます.
それはあなたがBabelを使用することをお勧めします.設定.バベル自身がそれを使うので、JSON.次に、新しく作成されたバベルで次のコードを入力します.設定.JSONファイル.

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

バベルは上記のコードなしで動作しません
以前の説明から、我々は今、上記のコードを加える目的を理解します.
次に、我々のパッケージのスクリプトセクションに次のコードを追加することによって、Babelを設定します.JSONファイル."dev": "nodemon --exec npm run babel-node -- src/app.js"あなたのパッケージで.JSONファイル、コードのスクリプトセクションは以下のようになります.

"scripts": {
    "start": "node app.js",
    "babel-node": "babel-node --presets='@babel/preset-env'",
    "dev": "nodemon --exec npm run babel-node -- src/app.js"
  }

次に、端末でこれを入力してコードを実行します.
http ://localhost : 8000に移動して次の出力を取得します.message "Welcome to Express"ええ!あなたは素晴らしいです、あなたは正常にこの記事の最初の部分を完了しました.それはあなたのBabeljsを使用してES 6のためのNODEJSアプリを設定するプロセスをした.
最後のセクションで作成した基本APIの単位テストを書く設定を設定します.
我々はいくつかの洗練されたテストを書くことはありません.代わりに、私はあなたが簡単に構築することができます基本的な概念を介してあなたが生産でより複雑なアプリケーションを書くようにします.
このセクションでは、我々は我々の主張のためにチャイと結合して、我々の単位テストを実行するためにMochaを利用しています.次のコマンドを入力して、モジュールをインストールします.npm install --save-dev mocha chai sinon-chai supertestすごい!私たちの単体テストに必要なすべての依存関係をインストールする必要があります.
次に、.mocharc.yaml ファイルをペーストします.

 require:
  - '@babel/register'

いくつかの機能は、ポリフィルを必要とする可能性がありますので、以下をインストールします.

# Polyfills for builtin methods
npm install --save core-js
# Polyfills for generator function
npm install --save regenerator-runtime

次に、インポートポリフィルを追加する前に
登録する
あなた.MOCHARCこれは次のようになります.

 require:
  - 'core-js'
  - 'regenerator-runtime'
  - '@babel/register'

「
上記の構成はMocha 8でうまく動作します.
次に、パッケージのスクリプトセクションを更新します.JSON :`
"scripts": {
"start": "node app.js",
"babel-node": "babel-node --presets='@babel/preset-env'",
"dev": "nodemon --exec npm run babel-node -- src/app.js",
"test": "mocha"
}
`最後に、ルートディレクトリにテストフォルダーを作成し、新しく作成したフォルダに2つの新しいファイルを作成します.インデックス.テスト.js
あなたのセットアップで.以下のコードをペーストします.
`
import supertest from 'supertest';
import chai from 'chai';
import sinonChai from 'sinon-chai';
import app from '../src/app';

chai.use(sinonChai);
export const { expect } = chai;
export const server = supertest.agent(app);
`

In your index.test.js, paste the code below:

`
import { expect, server } from './setup';

describe('app page test', () => {
it('should return status code 200', done => {
server
.get('/')
.expect(200)
.end((err, res) => {
expect(res.status).to.equal(200);
done();
});
});

it('should return a message', done => {
server
.get('/')
.expect(200)
.end((err, res) => {
expect(res.body.message).to.equal(
'Welcome to Express'
);
done();
});
});
});
`

Run this command in your terminal to check if it worked.

npm run testテスト結果は次のようになります.
テスト結果.PNG
これにより、このチュートリアルの最後に来ました.でも待って!あなたの生産であなたのアプリケーションを実行する必要があります.
ボーナス
パッケージを開きます.JSONとアップデート`
"babel-node": "babel-node --presets='@babel/preset-env'",
"prestart": "babel ./src --out-dir build",
"start": "node ./build/app",
"dev": "nodemon --exec npm run babel-node -- src/app.js",
"test": "mocha"
}
`prestartスクリプトはsrc/フォルダの内容を構築し、それをbuild/フォルダに置きます.NPMスタートコマンドを発行すると、このスクリプトはスタートスクリプトの最初に実行されます.
スタートスクリプトは、私たちが以前提供していたsrc/フォルダの代わりに、build/フォルダの内容を提供します.これは、プロダクションでファイルを提供するときに使用するスクリプトです.Herokuのようなクラウドサービスは、展開時にこのスクリプトを自動的に実行します.npm run dev は、開発中にサーバを起動します.我々は我々のアプリを実行するには、このスクリプトを使用している.我々は今、Babelノードを使用していることに注意してください通常のノードの代わりにアプリケーションを実行します.-- execフラグは、Babelノードにsrc/フォルダに役立つように強制します.スタートスクリプトでは、ビルド/フォルダのファイルがES 5にコンパイルされているので、ノードを使用します.
最初からこのチュートリアルでフォローしていただきありがとうございます、あなたは私のような素晴らしい学習者です.私がそれから学ぶことができて、それの必要があるならば、明確化をするように、下記のあなたのコメントを残してください.

Reference

この問題について(ビルドし、ES 6とNODEJS APIをテストします), 我々は、より多くの情報をここで見つけました https://dev.to/temiogundeji/build-and-test-a-nodejs-api-with-es6-5hfa

---

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol