创建本地服务，及服务代理(解决跨域)，支持热更新，针对老项目设计-白红宇

创建本地服务，及服务代理(解决跨域)，支持热更新，针对老项目设计

阅读量：6037 次

发布时间：2019-06-20

本文共 1774 字，大约阅读时间需要 5 分钟。

创建本地服务，及服务代理，支持热更新

Create http proxy support Hot update

TODO

特别针对老型项目设计，没有使用构建工具（ webpack、gulp、grunt etc.）

确保你的 nodejs 版本 >= 8.0.0，

解决跨域问题，支持本地开发热更新

安装（install）

yarn add @gauseen/web-proxy -D    # 推荐# ornpm i @gauseen/web-proxy -D

使用（usage）

// 首先，在项目根目录创建 server.js 文件

// 例子：// server.jsconst path = require('path')const server = require('@gauseen/web-proxy')const options = {    watch: false,    watchStatic: path.join(__dirname, './demo/'),    serverStatic: path.join(__dirname, './'),    port: 8008,    proxyTable: {        '/api': { target: 'http://doman.com/', }        /* '/apiFlag': {            target: 'http://doman.com/',            pathRewrite: {                // ^/old-path' : '/new-path                // 下面配置是将，/apiFlag 开头的请求，重写为 /newFlag，也可为 '' (空)                '^/apiFlag': '/newFlag',            }        } */    },    notify: true,    // ignores: ['js'],    callback: function () {        console.log('Server run success ...')    },}server(options)

options 参数说明：

参数	说明	类型	默认	是否必选	可选项
`watch`	是否开启热更新	`Boolean`	`false`	是	-
`watchStatic`	热更新目录	`String`		是	-
`serverStatic`	静态服务目录	`String`		是	-
`proxyTable`	要代理的 `doman`	`Object`		是	-
`port`	端口	`Number`	`8008`	否	-
`notify`	是否在浏览器端显示通知	`Boolean`	`false`	否	-
`ignores`	忽略 `watch` 文件格式	`Array`	-	否	`[css, html, js]`
`callback`	服务启动成功回调	`Function`	-	否	-

启动服务

node server.js# 或# 自己配置 npm scripts 运行# 更改 server.js 文件后要重启服务，更改才生效

浏览器运行

localhost: <port>/

注：

proxyTable 是个对象，键 为: 请求 URL 的统一标识字段，如请求接口：http://doman/api/back/login，那么 api 就是它的标识字段值 为: {    target: 要代理的（域名或IP） doman, # (必填)    pathRewrite: { '^/oldFlag': '/newFlag', } # (非必填)}pathRewrite 字段作用是防止后端接口比较混乱，没有统一的标识符，这时前端在本地开发时，可以自己添加一个统一标识符，并使用 pathRewrite 的功能，再让这个字段设置为空字符，这样就可以请求到服务端本来的 URL