@ appshell/ 配置

Utitliy为与Appshell和Webpack Module Federation一起构建微前端而生成appshell配置.

工作实例可见于此 这里。 。 。 .

说明: 这个软件包不再出版,建议使用 @ appshell/ cli (英语) 换句话说.

开始

开始,你需要安装 @appshell/config数字 :

npm install @appshell/config --save-dev

或者说

yarn add -D @appshell/config

或者说

pnpm add -D @appshell/config

职能

@appshell/config 是创建 CLI 的库。 大部分都可以通过 appshell 命令;脚本构建时直接到达软件包.

generateManifest

将一个显示模板处理成一个 appshell 显示器, 正在扩展 ${VAR} 当前环境中的占位符.

import { generateManifest } from '@appshell/config';

const manifest = await generateManifest<MyMetadata>('dist/appshell.template.json');

模板从何而来?

每个微前端配置 @appshell/webpack-plugin (英语) 发射 appshell.template.json 在建设时间。 这个函数将它转换成显示器,并发布一个软件包版本.

样本模板 :

{
  "remotes": {
    "CraModule/App": {
      "url": "${CRA_MFE_URL}",
      "metadata": {
        "route": "/cra",
        "displayName": "Example App",
        "displayGroup": "${CRA_MFE_DISPLAY_GROUP}",
        "order": 10,
        "icon": "ViewList"
      },
      "id": "3eb81a0c"
    }
  },
  "module": {
    "exposes": {
      "./App": "./src/App"
    },
    "filename": "remoteEntry.js",
    "name": "CraModule",
    "shared": {
      "react": {
        "singleton": true,
        "requiredVersion": "^18.2.0"
      },
      "react-dom": {
        "singleton": true,
        "requiredVersion": "^18.2.0"
      }
    }
  },
  "vars": {
    "RUNTIME_ARG_1": "${RUNTIME_ARG_1}",
    "RUNTIME_ARG_2": "${RUNTIME_ARG_2}"
  }
}

我的运行时间环境如何在全球应用软件中反映出来?

注意变量扩展语法 ${CRA_MFE_URL}时 generateManifest 被叫做实际运行时环境值被注入,并释放出一个appshell表.

说明 页:1 vars 定义运行时配置值 getVars() 从 @appshell/runtime/vars 一旦装入。 软件包必须共享 @appshell/runtime 作为接收他们的单子 见一用例.

应用壳样品清单 generateManifest 函数 :

{
  "remotes": {
    "CraModule/App": {
      "id": "3eb81a0c",
      "url": "http://localhost:3001/remoteEntry.js",
      "scope": "CraModule",
      "module": "./App",
      "metadata": {
        "route": "/cra",
        "displayName": "Example App",
        "displayGroup": "primary",
        "order": 10,
        "icon": "ViewList"
      }
    },
    "VanillaModule/Vanilla": {
      "id": "8232ce86",
      "url": "http://localhost:3002/remoteEntry.js",
      "scope": "VanillaModule",
      "module": "./Vanilla",
      "metadata": {
        "route": "/vanilla",
        "displayName": "Example React App",
        "displayGroup": "primary",
        "order": 10,
        "icon": "ViewList"
      }
    }
  },
  "modules": {
    "Appshell": {
      "name": "Appshell",
      "shared": {
        "react": {
          "singleton": true,
          "requiredVersion": "^18.2.0"
        },
        "react-dom": {
          "singleton": true,
          "requiredVersion": "^18.2.0"
        }
      }
    },
    "CraModule": {
      "exposes": {
        "./App": "./src/App"
      },
      "filename": "remoteEntry.js",
      "name": "CraModule",
      "shared": {
        "react": {
          "singleton": true,
          "requiredVersion": "^18.2.0"
        },
        "react-dom": {
          "singleton": true,
          "requiredVersion": "^18.2.0"
        }
      }
    },
    "VanillaModule": {
      "exposes": {
        "./Vanilla": "./src/App"
      },
      "filename": "remoteEntry.js",
      "name": "VanillaModule",
      "shared": {
        "react": {
          "singleton": true,
          "requiredVersion": "^18.2.0"
        },
        "react-dom": {
          "singleton": true,
          "requiredVersion": "^18.2.0"
        }
      }
    }
  },
  "vars": {
    "CraModule": {
      "RUNTIME_ARG_1": "Foo",
      "RUNTIME_ARG_2": "Biz"
    },
    "VanillaModule": {
      "RUNTIME_ARG_1": "Bar"
    }
  }
}

这个清单是 publish 作为软件包版本发送到注册处。 登记册的组成 每一个进入有效载荷的活化包 都服务于外壳.

如果我想用一个启动脚本来生成清单呢?

这个功能被 @ appshell/ cli (英语) 软件包。 你可以直接打电话 appshell generate manifest --template /path/to/appshell.template.json 以生成启动时的运行时间表.