1、开发背景
- 很多入门的同学,在跟着视频敲完代码之后,在打包出来的产物犯了难
- 如果是 hash 路由,要么使用后端部署,要么使用 github 或者 gitee 提供的静态部署服务
- 如果是 history 路由,那只能使用后端框架进行部署,就需要开发者再去学习后端框架,增加了时间成本
- 很多前端开发者,在开发完自己得个人项目后,如果只是单纯展示,又要为此写一个后端服务进行部署,非常浪费时间
这就是 quickly-deploy 产生得缘由
2、quickly-deploy 介绍
这是一个可以帮助你快速部署你的静态网站的包,使用 Koa 框架,你也可以在应用中添加更多的 Koa 前置中间件或者后置中间件
3、基础使用
3.1 下载
npm i quickly-deploy
yarn add quickly-deploy
pnpm add quickly-deploy
3.2 创建文件
你的项目需要包括启动的脚本(index.js),以及配置环境变量的文件(.env)
.env 环境目前主要用于添加监听的端口号:
3.3 引入使用
注:如果引入发生报错,可能是 node 版本过低,升级 node 重新下载即可
这个包对于 ESM 和 CJS 两种引入方式都是支持,看个人选择去使用即可(下面只展示 ESM 的用法):
import startServer from "quickly-deploy"
import path from "path"
import { fileURLToPath } from "url"
const __dirname = path.dirname(fileURLToPath(import.meta.url))
const envPath = path.resolve(__dirname, "./.env") // 配置文件路径
// 数组第一项放置你 打包后的文件路径
let app = startServer([path.resolve(__dirname, "./dist")], envPath)
app.start() // start server
3.4 启动
启动默认会包括两个地址,一个回环地址,一个是你本地 ipv4 部署地址
4、更多操作
import * as http from 'http';
import Koa from 'koa';
declare function startServer(filePath?: string[], envPath?: string, pushArr?: Koa.Middleware[], unshiftArr?: Koa.Middleware[]): {
start(msg?: string, preload?: ((app: Koa) => void) | undefined, started?: () => void): http.Server<typeof http.IncomingMessage, typeof http.ServerResponse>;
};
export { startServer as default };
- 第一个参数:可以添加更多需要部署的静态文件夹
- 第三个参数:可以添加后置的 koa 中间件,方便扩展
- 第四个参数:可以添加前置的 koa 中间件,方便扩展
编辑 | sishen
来源 | 前端兔
公众号 | 前端兔
关注公众号查看更多前端知识分享~~