【NPM库】- 0x03 - Express

1. Express 基础

1.1. 是什么？

Express 是一个保持最小规模的灵活的 Node.js Web 应用程序开发框架，为 Web 和移动应用程序提供一组强大的功能。

1.2. 安装

npm install express --save

1.3. 基础

const path = require("path");
const http = require('http');
const express = require("express");

/**
 * 监听主机
 * 监听端口
 */
const hostname = "localhost";
const port = 3000;

/**
 * 创建 app
 */
const app = express();
const listeningApp = http.createServer(app);

/**
 * 静态文件托管
 */
// 1.   the path that you provide to the express.static function
//      is relative to the directory from where you launch your node process.
//      If you run the express app from another directory,
//      it’s safer to use the absolute path of the directory that you want to serve.
// 2.   Express 会自动在配置的静态目录查找文件。存放静态文件的目录名不会出现在 URL 中。
//
//  例如：http://localhost:3000/img1.jpg
//  例如：http://localhost:3000/some/deep/path/img2.jpg
//
app.use(express.static(path.join(__dirname, 'public')));
// 3.   To create a virtual path prefix
//      (where the path does not actually exist in the file system)
//      for files that are served by the express.static function,
//      specify a mount path for the static directory.
//
//  例如：http://localhost:3000/static/img1.jpg
//  例如：http://localhost:3000/static/some/deep/path/img2.jpg
//
app.use('/static', express.static('src/public'))

/**
 * 路由配置
 */
app.get('/', (req, res) => res.send('Hello World!'))

/**
 * 开始监听
 */
listeningApp.listen(port, hostname, () => console.log(`Example app listening on port ${port}!`));

1.4. webpack-dev-server 对静态资源的处理

webpack-dev-server 的底层是 express，webpack-dev-server 提供的静态资源管理参数有这几个：

• devServer.contentBase
• devServer.contentBasePublicPath
• devServer.staticOptions

2. Express 中间件

2.1. 原理

Middleware functions are functions that have access to the request object (req), the response object (res), and the next function in the application’s request-response cycle. The next function is a function in the Express router which, when invoked, executes the middleware succeeding the current middleware.

Middleware functions can perform the following tasks:

• Execute any code.
• Make changes to the request and the response objects.
• End the request-response cycle.
• Call the next middleware in the stack.

If the current middleware function does not end the request-response cycle, it must call next() to pass control to the next middleware function. Otherwise, the request will be left hanging.

示例：

2.2. connect-history-api-fallback

webpack-dev-server 的 historyApiFallback 特性，是借助 express 中间件 connect-history-api-fallback，通过重写 url 实现。

• 对于满足如下条件的 url，将被重定向到 /index.html
  • The request is a GET request
  • which accepts text/html,
  • is not a direct file request, i.e. the requested path does not contain a . (DOT) character and
  • does not match a pattern provided in options.rewrites (see options below)

connect-history-api-fallback 代码示例：

webpack-dev-server 相关源码：

2.3. http-proxy-middleware

webpack-dev-server 使用 http-proxy-middleware 实现其 proxy 功能。

2.4. serve-index

serve-index 可以将文件夹中文件列表显示到浏览器中。

npm install serve-index

webpack-dev-server 中同样使用 serve-index 生成目录列表，与之相关的配置有：

• serveIndex
• contentBase
• contentBasePublicPath

参考：

express： https://expressjs.com/ https://www.expressjs.com.cn/ express：static-files https://www.expressjs.com.cn/starter/static-files.html express：middleware https://www.expressjs.com.cn/guide/writing-middleware.html connect-history-api-fallback： https://github.com/bripkens/connect-history-api-fallback http-proxy-middleware： https://github.com/chimurai/http-proxy-middleware serve-index： https://github.com/expressjs/serve-index webpack-dev-server：contentBase（3.11.0） https://webpack.js.org/configuration/dev-server/#devservercontentbase https://webpack.js.org/configuration/dev-server/#devservercontentbasepublicpath https://webpack.js.org/configuration/dev-server/#devserverstaticoptions webpack-dev-server：historyApiFallback（3.11.0） https://webpack.js.org/configuration/dev-server/#devserverhistoryapifallback webpack-dev-server：proxy https://webpack.js.org/configuration/dev-server/#devserverproxy