vue+node(express)做中间层开发三--express支持es6

码农天地 - 2021-01-05 04:23:34

---

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

原文 在 Node 和 Express 中使用 ES6 （及以上）语法

Tags 标签