在上一部分说到要在node层也使用axios并使用拦截器，但是发现express现在不支持es6，原本的拦截代码是用es6风格写的，于是要考虑让express支持es6语法。
修改目录结构
切换到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，用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这个文件本来是也是放路由设置的，但是以后打算要用axios，会大改，就先删除掉或者全部注释掉。
继续编辑server/node_api/src/app.js，同样是用import语法替代require，同时注意因为修改了目录结构，所以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+ 版本的代码转换为向后兼容的 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能否在 ES6 语法环境下运行，首先，在 package.json 中添加 dev 脚本：
"scripts": {
"server": "babel-node ./src/bin/www",
"dev": "NODE_ENV=development npm run server",
},
注意，路径由./bin/www变为了./src/bin/www，执行run npm dev已经可以正常启动了。
生产准备
prod 脚本 和 dev 脚本有点区别，我们需要将 src 目录中的所有 js 文件代码转换为 nodejs 能够识别的语法形式。运行 prod 脚本会生成一个和 src/ 目录结构类似的 dist/ 文件夹，但是每次在运行该脚本之前，我们需要将旧的 dist/ 文件夹删除，确保我们运行的是最新生成的代码。下面是具体步骤：
- 创建 build 脚本，它会转换 src/ 中的文件代码并生成新的 dist/ 文件夹。
- 安装 rimraf 包，并新建 clean 脚本，用来删除 dist/ 文件夹。
- 新建 prod 脚本，将 clean，build，start server 脚本组合起来。
我们先要安装 rimraf 包，用来删除某个文件夹
npm install rimraf --save
安装好后，在 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 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"
},
网友评论