小白福利!我开发了一个快速部署库

news2025/9/21 13:35:02

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 };