在上一部分說到要在node層也使用axios并使用攔截器峭沦，但是發(fā)現(xiàn)express現(xiàn)在不支持es6扫皱，原本的攔截代碼是用es6風(fēng)格寫的，于是要考慮讓express支持es6語法摩泪。
修改目錄結(jié)構(gòu)
切換到node-api目錄下笆焰，新建src文件夾。
- 創(chuàng)建 src/ 目錄
- 將 bin/ 见坑， app.js 和 routes/ 移動到 src 目錄
- 將 bin 目錄中的 www 文件重命名為 www.js
- 將 public/ 移動到項目根目錄
語法轉(zhuǎn)換
編輯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，用import替換require荞驴，export替換module.exports
// 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這個文件本來是也是放路由設(shè)置的不皆，但是以后打算要用axios，會大改熊楼，就先刪除掉或者全部注釋掉霹娄。
繼續(xù)編輯server/node_api/src/app.js，同樣是用import語法替代require鲫骗，同時注意因為修改了目錄結(jié)構(gòu)犬耻，所以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执泰，增加一次運行多個腳本的時候書寫便利枕磁。
npm install npm-run-all --save-dev
安裝 babel 和其他包。Babel 是一個 Javascript 編譯器术吝，主要用于將 ECMAScript 2015+ 版本的代碼轉(zhuǎn)換為向后兼容的 JavaScript 語法计济，以便能夠運行在當(dāng)前和舊版本的瀏覽器或其他環(huán)境中，比如 Node.js排苍。在項目根目錄打開終端命令行沦寂，輸入下面命令，我們會安裝最新版的 babel（Babel 7）纪岁。
npm install -D @babel/core @babel/cli @babel/preset-env @babel/node
-D是表示安裝的包放在devDependency --save是表示安裝的包放在dependency下
在node-api根目錄創(chuàng)建.babelrc.js寫入以下代碼
{ "presets": ["@babel/preset-env"] }
因為我們使用 Babel 來轉(zhuǎn)換不同類型的 js 語法凑队，所以需要在 .babelrc 中配置 preset-env 預(yù)設(shè)（之前安裝的），它會告訴 Babel 去轉(zhuǎn)換哪種類型幔翰。
在這些都設(shè)置好后漩氨，我們就可以測試 node server能否在 ES6 語法環(huán)境下運行，首先遗增，在 package.json 中添加 dev 腳本：
"scripts": {
"server": "babel-node ./src/bin/www",
"dev": "NODE_ENV=development npm run server",
},
注意叫惊，路徑由./bin/www變?yōu)榱?code>./src/bin/www，執(zhí)行run npm dev已經(jīng)可以正常啟動了做修。
生產(chǎn)準(zhǔn)備
prod 腳本 和 dev 腳本有點區(qū)別霍狰，我們需要將 src 目錄中的所有 js 文件代碼轉(zhuǎn)換為 nodejs 能夠識別的語法形式抡草。運行 prod 腳本會生成一個和 src/ 目錄結(jié)構(gòu)類似的 dist/ 文件夾，但是每次在運行該腳本之前蔗坯，我們需要將舊的 dist/ 文件夾刪除康震，確保我們運行的是最新生成的代碼。下面是具體步驟：
- 創(chuàng)建 build 腳本宾濒，它會轉(zhuǎn)換 src/ 中的文件代碼并生成新的 dist/ 文件夾腿短。
- 安裝 rimraf 包，并新建 clean 腳本绘梦，用來刪除 dist/ 文件夾橘忱。
- 新建 prod 腳本，將 clean卸奉，build钝诚，start server 腳本組合起來。
我們先要安裝 rimraf 包榄棵，用來刪除某個文件夾
npm install rimraf --save
安裝好后凝颇，在 package.json 的 scripts 字段中加入 clean 腳本，我們會在 build 腳本中使用到它秉继，現(xiàn)在整個 scripts 字段結(jié)構(gòu)如下
"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腳本祈噪，通過配置文件泽铛，實現(xiàn)自動監(jiān)聽文件編號然后重啟服務(wù)器尚辑，這樣更優(yōu)雅。
安裝nodemon npm i -D nodemon
在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"
},
