一个前后端开发一体化的 DEMO，包含云函数最小运行时项目 + 前后端开发一体化示例项目

前后端一体化运行环境 + DEMO 

一个前后端开发一体化的 DEMO，主要包括以下几个项目：

 实现了云函数最小运行时环境服务，可以通过接口直接运行云函数

 编译，配合云函数运行时实现了简单的应用级别前后端开发一体化的能力

# 初始化包管理器, 会自动安装 yarn, pnpm 等工具到全局
npm i -g corepack

# 初始化并安装项目
yarn

# 启动云函数运行时服务
yarn run start

# 启动前后端开发一体化示例服务端编译
yarn run start:example-server

# 启动前后端开发一体化示例前端编译
yarn run start:example-static

执行完上述命令后会自动打开网页应用

点击按钮时会发起云函数请求 

packages/example/src/

├── api
│   ├── add.ts
│   └── count.ts
├── index.css
├── index.ts

可以看到后端云函数的编写方式与一般的函数编写方式基本没有不同，目前只有以下特殊要求：

 导出，即一个文件为一个云函数

入参与出参都可以序列化成字符串

// src/api/count
import add from "./add";
export default async (...args: number[]) => {
  return args.reduce((prev, current) => prev + current, 0);
};

 别名直接引入云函数，直接使用即可

// src/index.ts
// 1. 使用别名引入对应的云函数
import count from "@api/count";
import "./index.css";

const init = async () => {
  document.getElementById("app")!.innerHTML = `
  <h1>Hello Vanilla!</h1>
  <button id="count">Async Call Cloud Function(count)</button>
  <p id="result">Current Result: 0</p>
  `;
  let currentCount = 0;

  const refreshUI = () => {
    document.getElementById(
      "result"
    )!.innerText = `Current Result: ${currentCount}`;
  };

  const addEventListener = () => {
    document.getElementById("count")!.onclick = async () => {
      // 2. 这里可以直接进行调用
      currentCount = await count(currentCount, 1);
      refreshUI();
    };
  };

  addEventListener();
  refreshUI();
};

init();

前后端一体化运行环境 + DEMO

简介

技术栈

快速开始

前后端开发一体化使用展示

1. 示例项目介绍

2. 示例核心代码

项目结构

后端逻辑编写方式

前端逻辑编写方式

Reference