uioz / mfe-proxy-middleware

MIT License
0 stars 0 forks source link

`mfe-config` 规范与 `static` 选项 #14

Open uioz opened 3 years ago

uioz commented 3 years ago

说明

目前静态资源托管的规则是基于通配符来处理的, 所有基于 /static/* 开头的都将视为静态资源请求.

但是这有两个缺点:

  1. /static 并非所有项目通用, 也可能是 /public
  2. 静态资源托管是基于构建完成的目录, 在这种情况下可能不需要手动指定静态资源处理

实现

为了兼容上述的两种情况, mfe-config.js 需要修改为如下的定义:

export interface appProxyOption {
  /**
   * 需要代理的地址
   */
  url: string;
  /**
   * 静态资源地址, 默认 '/static'
   * 相对 url 的地址
   */
  publicPath?: string;
  /**
   * mfe-route 地址, 默认 'mfe-route.json'
   * 相对于 url 的完整路径
   */
  route?: string;
}

export interface mfeConfig {
  /**
   * 当前项目打包后输出的路径, 默认 ./dist
   * 由 mfe-proxy-server 使用
   */
  outputDir?: string;
  /**
   *
   * 当前项目路由配置的相对地址, 默认 ./mfe-route.json
   * 由 mfe-proxy-server 使用
   */
  routePath?: string;
  /**
   * 当前项目静态配置
   * 由 mfe-proxy-server 使用
   */
  static?:
    | {
        /**
         * 静态资源路径的前缀, 默认 /static
         */
        publicPath?: string;
        /**
         * 静态资源相对于项目所在的位置, 默认 ./dist
         */
        outputDir?: string;
        /**
         * 静态资源前缀, 默认 true
         */
        staticPrefix?: boolean;
      }
    | false;
  /**
   * 如果多个项目路由重复则优先匹配靠前的路由
   * 本地路由的优先级最高
   * 由 mfe-proxy-middleware 使用
   */
  appThatNeededProxy?: Array<appProxyOption>;
}

在不提供 static 选项的情况下, 直接托管构建好的目录, 如果输出路径完全匹配路由规则, 那么不需要做任何配置.

例如项目 A 的所有静态资源地址需要请求 /static/appA 如果打包后的结构如下:

--+ dist
  --+ static
      --+ appA
          --+ xxx.png
          --+ xxx.css

如果你不愿意或者难以调整你打包后的目录, 这里还有一种传统的模式.

static 选项

mfe-config.static 是可选的, 默认情况下静态服务器应该直接托管打包后的目录, 如果你的静态资源不在构建的目录中, 则需要配置:

{
  static:{
    outputDir:'./public',// 默认 './dist'
  }
}

那么静态服务器应该将 public 目录一并托管.

你还可以指定 publicPath 如果你需要的话, publicPath 的默认值是 /static.

另外还有一个可选的 staticPrefix 选项, 默认是开启的你可以指定 false 来关闭它, 它会自动的在 publicPath 后面添加项目名称(package.json.name), 这是为了避免不同项目下的静态资源路径重复, 相应的你需要修改代码中静态资源的引用.

如果你的项目是 appA 则实际的 publicPath 是 '/static/appA', 你也可以关闭它, 然后手动修改 publicPath/static/appA 来实现同样的功能.

直接托管模式

static 还可以通过标记为 false 来表示启动直接托管模式.

https://github.com/uioz/mfe-proxy-server/issues/21#issue-880421756

uioz commented 3 years ago

mfe-proxy-middleware 实现

按照先易后难的形式分为两个阶段实现.

stage 1

要求在 mfe-config.appThatNeededProxy.publicPath 中指定静态资源的文件路径.

stage 2

要求编写在 mfe-route.publicPath 中, 而不是 appThatNeededProxy.publicPath 中, 这样 mfe-proxy-middleware 会自动读取, 而 appThatNeededProxy 中存在的 publicPath 会覆盖远程 mfe-route.json 的内容.