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/をプロジェクトルートディレクトリ に移動
こうぶんへんかん
スクリプト構成
まず
babelと他のパッケージをインストールします.BabelはJavascriptコンパイラで、主にECMAScript 2015+バージョンのコードを後方互換JavaScript構文に変換し、Node.jsなどの現在および古いバージョンのブラウザまたは他の環境で実行できるようにします.プロジェクトルートディレクトリでターミナルコマンドラインを開き、次のコマンドを入力すると、最新版のbabel(Babel 7)がインストールされます.
-Dはインストールを示すパッケージがdevDependencyに置かれている--saveはインストールを示すパッケージがdependencyの下に置かれている
node-apiルートディレクトリ作成
Babelを使用して異なるタイプのjs構文を変換するため、.babelrcでpreset-envプリセット(以前にインストールされた)を構成する必要があります.Babelがどのタイプを変換するかを教えます.
これらを設定すると、node serverがES 6構文環境で実行できるかどうかをテストできます.まず、package.jsonにdevスクリプトを追加します.
なお、パスは
生産準備
Prodスクリプトとdevスクリプトは少し違います.srcディレクトリのすべてのjsファイルコードをnodejsが認識できる構文形式に変換する必要があります.Prodスクリプトを実行すると、src/ディレクトリ構造に似たdist/フォルダが生成されますが、スクリプトを実行するたびに古いdist/フォルダを削除し、最新に生成されたコードが実行されていることを確認する必要があります.次の手順に従います.はbuildスクリプトを作成し、src/のファイルコードを変換し、新しいdist/フォルダを生成します. rimrafパッケージをインストールし、dist/フォルダを削除するためのcleanスクリプトを新規作成します. prodスクリプトを新規作成し、clean、build、start serverスクリプトを組み合わせます.
まずrimrafパッケージをインストールして、フォルダを削除します.
インストール後、package.jsonのscriptsフィールドにcleanスクリプトを追加します.buildスクリプトで使用します.scriptsフィールド全体の構造は次のとおりです.
nodemonの設定
watchスクリプトを追加し、プロファイルを構成することで、ファイル番号を自動的に傍受し、サーバを再起動することで、より優雅になります.nodemon
watchスクリプトを追加
原文NodeとExpressでES 6(以上)構文を使用する
ディレクトリ構造の変更
node-apiディレクトリに切り替え、srcフォルダを新規作成します.
こうぶんへんかん
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/フォルダを削除し、最新に生成されたコードが実行されていることを確認する必要があります.次の手順に従います.
まず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(以上)構文を使用する