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(以上)構文を使用する