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 提供的静态资源管理参数有这几个:
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:
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 实现。
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 生成目录列表,与之相关的配置有:
参考:
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