一体化能力高级扩展

当前的前端和 FaaS 函数一体化结合支持的比较有限，如果希望有更多的可能性尝试扩展，我们将提供一些标准化支持。

这些支持分为几个方面

• 函数端调用和调试
• 函数构建

本地服务器

适用场景

• 1、自定义前端框架（Vue，React），前端普通的 URL 类型的请求
• 2、自定义网关类型的请求

可支持的部分
**
一般来说，前端框架都会有一个适合自己的 DevServer，启动一个端口，为了方便集成，我们会提供一个 koa 和 Express 通用的中间件，其中会集成目前常用的自定义网关 SDK，以及 URL 类型的解析。

import { useExpressDevPack } from '@midwayjs/faas-dev-pack';
// dev server 代码
app = express();
// 加载中间件
app.use(
  useExpressDevPack({
    functionDir: join(__dirname, './fixtures/ice-demo-repo'),
    sourceDir: 'src/apis',
  })
);

暴露出两个中间件方法，用于上层集成。

• useExpressDevPack(options: DevOptions)
• useKoaDevPack(options: DevOptions)

export interface DevOptions {
  functionDir: string; // 本地目录，默认 process.cwd()
  sourceDir?: string; // 一体化调用是，需要知道当前的函数目录结构，比如 src/apis
  ignorePattern?: string [] | (req) => boolean // 可以忽略部分路径，让中间件好做后续操作
}

示例
**

// koa 下
app.use(
  useKoaDevPack({
    functionDir: join(__dirname, './fixtures/ice-demo-repo'),
    sourceDir: 'src/apis',
    ignorePattern: ['/api']        // 忽略所有 /api 的路由，这里的写法是正则，内部会使用 new RegExp(pattern) 来匹配
  })
);
// express
app.use(
  useExpressDevPack({
    functionDir: join(__dirname, './fixtures/ice-demo-repo'),
    sourceDir: 'src/apis',
    ignorePattern: (req) => {
        // return true 即为忽略
    }
  })
);

示例：React 的支持

针对 React 的 Webpack DevServer 扩展，一般在自定义的 setupProxy.js 文件中。

// @ts-ignore: isolated modules error
const { useExpressDevPack } = require('@midwayjs/faas-dev-pack');
const { resolve } = require('path');
const URL = require('url');
module.exports = function (app) {
  app.use(
    useExpressDevPack({
      functionDir: resolve(__dirname, '../'),
      sourceDir: resolve(__dirname, 'apis'),
      // 忽略渲染函数
      ignoreWildcardFunctions: ['render'],
      // 忽略静态文件地址
      ignorePattern: (req) => {
        const { pathname } = URL.parse(req.url);
        return /\.(js|css|map|json|png|jpg|jpeg|gif|svg|eot|woff2|ttf)$/.test(pathname);
      },
    })
  )
}

示例：Vue 的支持

针对 vue cli 的封装场景，我们也封装了一个 vue cli 插件。

具体请参考：https://github.com/midwayjs/vue-cli-plugin-faas