文章目录
  1. 1. 开发部署
    1. 1.1. 逻辑思路
    2. 1.2. Express模块
    3. 1.3. 代码实现
  2. 2. 结束语

最近项目中需要搭建一个多页面的环境,包括本地路由服务和分页面打包。
本节介绍开发环境路由的设计,以及实现服务启动过程。

开发部署


逻辑思路

开发环境的部署和生产环境不一致,我们规划的本地环境实现的效果如下:

  1. 整个项目启动一次,多页面共享相同环境。
  2. 根据路由来匹配不同页面,路由与页面目录一致。

如:
路由为/page1时,打开page1页面。
路由为/page2时,打开page2页面。
路由匹配不到对应页面时,进行相关提示。

Express模块

Express是一个基于Node.js平台的极简、灵活的web应用开发框架,它提供一系列强大的特性,帮助你创建各种Web应用。

既然我们需要路由的匹配,这里我们使用express模块。

路由(Routing)是由一个URI(或者叫路径)和一个特定的HTTP方法(GETPOST等)组成的,涉及到应用如何响应客户端对某个网站节点的访问。
每一个路由都可以有一个或者多个处理器函数,当匹配到路由时,这个/函数将被执行。

路由的定义由如下结构组成:app.METHOD(PATH, HANDLER)
其中,app是一个express实例,METHOD是某个HTTP请求方式中的一个,PATH是服务器端的路径,HANDLER是当路由匹配到时需要执行的函数。

官方示例:

1
2
3
4
5
6
7
8
9
// 对网站首页的访问返回 "Hello World!" 字样
app.get('/', function (req, res) {
res.send('Hello World!');
});
// 网站首页接受 POST 请求
app.post('/', function (req, res) {
res.send('Got a POST request');
});
  • 请求对象(req

    • req.params: 这是一个数组对象,命名过的参数会以键值对的形式存放
      • 比如有一个路由/user/:name"name"属性会存放在req.params.name, 这个对象默认为{}
    • req.query: 一个解析过的请求参数对象,默认为{}
    • req.body: 这个对应的是解析过的请求体,
      • 这个特性是bodyParser()中间件提供,其它的请求体解析中间件可以放在这个中间件之后。当bodyParser()中间件使用后,这个对象默认为{}
    • req.route: 这个对象里是当前匹配的Route里包含的属性,比如原始路径字符串,产生的正则,等等
    • req.path: 返回请求的URL的路径名
    • req.host: 返回从"Host"请求头里取的主机名,不包含端口号
  • 响应对象(res

    • res.end(): 终结响应处理流程
    • res.json(): 发送一个JSON格式的响应
    • res.jsonp(): 发送一个支持JSONPJSON格式的响应
    • res.redirect(): 重定向请求
    • res.render(): 渲染视图模板
    • res.send(): 发送各种类型的响应
    • res.sendFile: 以八位字节流的形式发送文件
    • res.sendStatus(): 设置响应状态代码,并将其以字符串形式作为响应体的一部分发送

代码实现

我们的开发部署代码放置在build文件夹下的dev-server.js,则我们的package.json中的script

1
2
3
4
5
6
{
"scripts": {
"dev": "node build/dev-server.js",
"build": "node build/build.js"
}
}

同时,我们将每个页面的主页面命名为[pageName].html,然后匹配路由之后就能获取相关页面:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
// dev-server.js
var path = require('path')
var express = require('express')
var utils = require('./utils')
var webpack = require('webpack')
var webpackConfig = require('./webpack.config')
var HtmlWebpackPlugin = require('html-webpack-plugin')
// Express实例
var app = express()
// 获取页面目录
var entries = utils.entries
// 重置入口entry
webpackConfig.entry = {}
// 设置output为每个页面[name].js
webpackConfig.output.filename = '[name].js'
webpackConfig.output.path = path.join(__dirname, 'dist')
Object.keys(entries).forEach(function (name) {
// 每个页面生成一个entry,如果需要HotUpdate,在这里修改entry
webpackConfig.entry[name] = entries[name]
// 每个页面生成一个[name].html
var plugin = new HtmlWebpackPlugin({
// 生成出来的html文件名
filename: name + '.html',
// 每个html的模版,这里多个页面使用同一个模版
template: './index.html',
// 自动将引用插入html
inject: true,
// 每个html引用的js模块,也可以在这里加上vendor等公用模块
chunks: [name]
})
webpackConfig.plugins.push(plugin)
})
// webpack编译器
var compiler = webpack(webpackConfig)
// webpack-dev-server中间件
var devMiddleware = require('webpack-dev-middleware')(compiler, {
publicPath: '/',
stats: {
colors: true,
chunks: false
},
progress: true,
inline: true,
hot: true
})
// 使用webpack中间件
app.use(devMiddleware)
// 路由
app.get('/:pagename?', function (req, res, next) {
var pagename = req.params.pagename
? req.params.pagename + '.html'
: 'index.html'
var filepath = path.join(compiler.outputPath, pagename)
// 使用webpack提供的outputFileSystem
compiler.outputFileSystem.readFile(filepath, function (err, result) {
if (err) {
// something error
return next('输入路径无效,请输入目录名作为路径,有效路径有:\n/' + Object.keys(entries).join('\n/'))
}
// 发送获取到的页面
res.set('content-type', 'text/html')
res.send(result)
res.end()
})
})
module.exports = app.listen(8080, function (err) {
if (err) {
// do something
return
}
console.log('Listening at http://localhost:8080\n')
})

这里面我们使用到webpack-dev-middleware模块,主要用于监视文件变化后重新编译,但这里并没有结合热加载来刷新页面,后面我们一起讲吧。

结束语


本节我们针对开发部署的场景,来对服务的启动做了些调整,当然还有很多地方如热加载、source-map等都需要完善。
可参考代码github-vue-multi-pages,主要是这套环境使用在vue上的demo。

查看Github有更多内容噢:https://github.com/godbasin
更欢迎来被删的前端游乐场边撸猫边学前端噢

码生艰难,写文不易,给我家猪囤点猫粮了喵~

作者:被删

出处:https://godbasin.github.io

本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

文章目录
  1. 1. 开发部署
    1. 1.1. 逻辑思路
    2. 1.2. Express模块
    3. 1.3. 代码实现
  2. 2. 结束语