在上一部分说到要在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"
},