vue+node(express)中間層開発三--expressサポートes 6

前のセクションではnodeレイヤでもaxiosを使用してブロッキングを使用すると言いましたが、expressは現在es 6をサポートしていないことがわかり、元のブロッキングコードはes 6スタイルで書かれているので、expressにes 6構文をサポートさせることを考えます.
ディレクトリ構造の変更
node-apiディレクトリに切り替え、srcフォルダを新規作成します.

src/ディレクトリ

を作成

bin/,app.jsおよびroutes/をsrcディレクトリ

に移動

binディレクトリのwwwファイルをwww.js

に名前変更

public/をプロジェクトルートディレクトリ

に移動
こうぶんへんかんserver/node_api/src/bin/www.jsを編集し、頭部を注釈するrequire指令をimportに変更

#!/usr/bin/env node

/**
 * Module dependencies.
 */
import app from '../app'
import debugLib from 'debug'
import http from 'http'
const debug = debugLib('node-api:server')

// var app = require('../app');
// var debug = require('debug')('node-api:server');
// var http = require('http');

server/node_api/src/routes/index.jsを編集し、requireをimportで置き換え、module.exportsをexportで置き換えます.

// var express = require('express')
// var router = express.Router()
import express from 'express'
var router = express.Router()
/* GET home page. */
router.get('/', function (req, res, next) {
  res.render('index', { title: 'Express' })
})

// module.exports = router
export default router

server/node_api/src/routes/users.jsというファイルも元々ルート設定されていますが、後でaxiosを使うつもりで、大きく変更するので、先に削除したり、すべてコメントしたりします.server/node_api/src/app.jsの編集を続行し、requireの代わりにimport構文を使用します.また、ディレクトリ構造が変更されているため、viewsとpublicのパスも変更されることに注意してください.例えば、app.set('views', path.join(__dirname, '../views'))

import express from 'express'
import path from 'path'
import cookieParser from 'cookie-parser'
import logger from 'morgan'
import createError from 'http-errors'
import indexRouter from './routes/index'  //     usersRouter 
import cors from 'cors'

const app =express()
// var app = express()

// view engine setup
app.set('views', path.join(__dirname, '../views'))
app.set('view engine', 'jade')

app.use(logger('dev'))
app.use(express.json())
app.use(express.urlencoded({ extended: false }))
app.use(cookieParser())
app.use(express.static(path.join(__dirname, '../public')))

app.use('/', indexRouter)
// app.use('/users', usersRouter)  //      

// catch 404 and forward to error handler
app.use(function (req, res, next) {
  next(createError(404))
})

...

// error handler
app.use(function (err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message
  res.locals.error = req.app.get('env') === 'development' ? err : {}

  // render the error page
  res.status(err.status || 500)
  res.render('error')
})

export default app

スクリプト構成
まずnpm-run-allをインストールし、1回に複数のスクリプトを実行するときに書くのが便利になります.npm install npm-run-all --save-dev
babelと他のパッケージをインストールします.BabelはJavascriptコンパイラで、主にECMAScript 2015+バージョンのコードを後方互換JavaScript構文に変換し、Node.jsなどの現在および古いバージョンのブラウザまたは他の環境で実行できるようにします.プロジェクトルートディレクトリでターミナルコマンドラインを開き、次のコマンドを入力すると、最新版のbabel(Babel 7)がインストールされます.npm install -D @babel/core @babel/cli @babel/preset-env @babel/node
-Dはインストールを示すパッケージがdevDependencyに置かれている--saveはインストールを示すパッケージがdependencyの下に置かれている
node-apiルートディレクトリ作成.babelrc.jsに次のコードを書き込む

{ "presets": ["@babel/preset-env"] }

Babelを使用して異なるタイプのjs構文を変換するため、.babelrcでpreset-envプリセット(以前にインストールされた)を構成する必要があります.Babelがどのタイプを変換するかを教えます.
これらを設定すると、node serverがES 6構文環境で実行できるかどうかをテストできます.まず、package.jsonにdevスクリプトを追加します.

  "scripts": {
     "server": "babel-node ./src/bin/www",
     "dev": "NODE_ENV=development npm run server",
    },

なお、パスは./bin/wwwから./src/bin/wwwに変更され、実行は正常に開始されている.
生産準備
Prodスクリプトとdevスクリプトは少し違います.srcディレクトリのすべてのjsファイルコードをnodejsが認識できる構文形式に変換する必要があります.Prodスクリプトを実行すると、src/ディレクトリ構造に似たdist/フォルダが生成されますが、スクリプトを実行するたびに古いdist/フォルダを削除し、最新に生成されたコードが実行されていることを確認する必要があります.次の手順に従います.

はbuildスクリプトを作成し、src/のファイルコードを変換し、新しいdist/フォルダを生成します.

rimrafパッケージをインストールし、dist/フォルダを削除するためのcleanスクリプトを新規作成します.

prodスクリプトを新規作成し、clean、build、start serverスクリプトを組み合わせます.

まずrimrafパッケージをインストールして、フォルダを削除します.run npm dev
インストール後、package.jsonのscriptsフィールドにcleanスクリプトを追加します.buildスクリプトで使用します.scriptsフィールド全体の構造は次のとおりです.

"scripts": {
    "server": "babel-node ./src/bin/www",
    "server:prod": "node ./dist/bin/www",
    "dev": "NODE_ENV=development npm run server",
    "clean": "rimraf dist",
    "build": "babel ./src --out-dir dist",
    "start": "npm run prod",
    "prod": "NODE_ENV=production npm-run-all clean build server:prod"
  },

nodemonの設定
watchスクリプトを追加し、プロファイルを構成することで、ファイル番号を自動的に傍受し、サーバを再起動することで、より優雅になります.nodemon npm install rimraf --saveをnode_にインストールapiルートディレクトリの下にnodemon.jsonプロファイルを追加

{
  "exec": "npm run dev",
  "watch": ["src/*", "public/*"],
  "ext": "js, html, css, json"
}

watchスクリプトを追加

  "scripts": {
    "server": "babel-node ./src/bin/www",
    "server:prod": "node ./dist/bin/www",
    "dev": "NODE_ENV=development npm run server",
    "clean": "rimraf dist",
    "build": "babel ./src --out-dir dist",
    "start": "npm run prod",
    "prod": "NODE_ENV=production npm-run-all clean build server:prod",
    "watch": "nodemon"
  },

原文NodeとExpressでES 6(以上)構文を使用する