Expressjs: ECMAScript 2015 (ES6) で書かれた Javascript

前提条件

このチュートリアルでは、次のものがあることを前提としています.

ノード

の基礎知識

マシンにインストールされたノード

任意のコードまたはテキスト エディター

最初に、ターミナルでコマンドを使用して Express アプリケーションを作成します.

npx express-generator < your-project-name > --no-view

ここで --no-view フラグは、スケルトン Express アプリケーションにハンドルバー、ejs、pug などのテンプレート エンジンを使用しないことを意味します.

アプリケーションを作成したら、アプリケーション ディレクトリに移動する必要があります. Windows Powershell および Linux ターミナルの場合は、次を使用します.

cd あなたのプロジェクト名

次に、目的のテキスト エディターを開きます.私は VSCode のみを使用しているため、端末とテキスト エディターを同時に開いています.ただし、任意のテキスト エディターを使用できます.

次のコマンドで依存関係をインストールします.

npm install

生成されたプロジェクトの準備ができたら、依存関係をインストールし、いくつかのフォルダーを移動する必要があります.このコマンドを実行して、他のパッケージをインストールします.

ここでは、3 つの異なる種類または方法を使用して、仕事を簡単に行うことができます.

最初の方法:

ターミナルで次のように入力します.

npm install esm

また、特定のプロジェクトにのみnodemonをインストールします

npm install --save-dev nodemon  or npm install -D nodemon

Nodemon はアプリケーションを自動的に再起動し、Express アプリへの新しい変更をより迅速にテストしたり、グローバル NPM 依存関係としてインストールしたりできるようにします

npm install -g nodemon  

パッケージの esm を有効にする: esm を使用してメインの ES モジュールを読み込み、メイン エントリ ファイル index.js で CommonJS としてエクスポートします.

require = require("esm")(module);
module.exports = require("./app.js");

新しいファイル app.js を作成し、以下を追加します.

const express = require('express');
import express from 'express';

var app = express();
var PORT = 3000;

app.listen(PORT, function(err){
    if (err) console.log("Error in server setup")
    console.log("Server listening on Port", PORT);
})

次を使用してアプリを実行します.

npm 開始

この段階で問題が発生した場合は、
参考としてcodesendbox link.

2 番目の方法:

プロジェクトの package.json ファイルに以下を追加します.

"type": "module"

出来上がりですが、インポートとして追加するすべてのファイルに拡張子を追加する必要があります (例: (filename.js)).

'./routes/userRoutes.js' から userRoutes をインポートします.

この段階で問題が発生した場合は、
参考としてcodesendbox link.

3 番目の方法:

Babel セットアップの使用

バベルとは?

Babel は、JavaScript プログラミング言語の ES6 関数を使用するのに役立つ JavaScript コンパイラです.

次のパッケージを追加します.コマンドを使用します

npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node babel-plugin-module-resolver rimraf

また

npm install -D @babel/core @babel/cli @babel/preset-env @babel/node babel-plugin-module-resolver rimraf

パッケージをインストールしたら、プロジェクトの package.json ファイルに以下を追加します.

"scripts": {
    "build": "npm run clean && babel ./src --out-dir dist --copy-files",
    "clean": "rimraf dist",
    "prod": "npm run -s build",
    "start": "node dist/app.js",
    "dev": "nodemon --exec babel-node src/app.js"
},

したがって、インストールが完了したら、.babelrc という名前の新しいファイルを作成して、babel を構成します.その中に次のテキストを追加します.

{
  "presets": ["@babel/preset-env"],
  "plugins": [
    [
      "module-resolver",
      {
        "alias": {
          "@routes": "./src/routes"
        }
      }
    ]
  ]
}

結論

Node.js プロジェクトで ES6 を使用して、最新の JavaScript 関数を最適な方法で作成する方法を学びました.

JavaScript コンパイラーとして Babel を含めたこの記事の最後の部分で問題が発生した場合は、GitHub Repository のコードを自由に確認してください.

この記事に関するご質問やご意見がございましたら、お気軽にお問い合わせください.

読んでくれてありがとう.

クレジット

Express.js、最小限で柔軟な Node.js Web アプリケーション フレームワーク: https://expressjs.com/

Esm、今日の明日の ECMAScript モジュール!: https://github.com/standard-things/esm#readme

Nodemon、リロード、自動: https://nodemon.io/

Babel は JavaScript コンパイラです: https://babeljs.io/docs/en/usage