乐趣区

关于前端:vuenodeexpress做中间层开发三express支持es6

jiezi

在上一部分说到要在 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（及以上）语法

退出移动版