@appshell/webpack-plugin (英语)

以 Appshell 和 Webpack Module Federation 创建微前端的 appshell 显示模板 。 appshell 显示模板被子处理以生成一个 appshell manifest。 。 。 .

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

开始

开始,你需要安装 @appshell/webpack-plugin数字 :

npm install @appshell/webpack-plugin --save-dev

或者说

yarn add -D @appshell/webpack-plugin

或者说

pnpm add -D @appshell/webpack-plugin

然后将插件添加到 webpack 每个远程包的配置 。 例如:

网络包装. config.js

const { AppshellPlugin } = require('@appshell/webpack-plugin');

module.exports = {
  plugins: [
    new AppshellPlugin({
      config: './path/to/appshell.config.yaml',
    }),
  ],
};

远程配置 : appshellRemote()

大部分远程的网页包装配置不是作者的选择:注册和 @appshell/react-shell 它需要每一个遥控器. appshellRemote() 返回该部分,然后您 用你自己的装载器扩展,通常使用 webpack-merge它需要 @module-federation/enhanced 安装在它旁边.

const { merge } = require('webpack-merge');
const { appshellRemote } = require('@appshell/webpack-plugin');
const { dependencies } = require('./package.json');

module.exports = (_env, { mode }) =>
  merge(
    appshellRemote({
      name: 'PackagesModule',
      exposes: { './Packages': './src/Packages' },
      port: 7302,
      mode,
      react: true,
      dependencies,
    }),
    {
      resolve: { extensions: ['.js', '.ts', '.tsx'] },
      module: {
        rules: [
          /* your transpiler, your CSS */
        ],
      },
    },
  );

其设定和要求:

默认可以覆盖 :

• Dev服务器只覆盖了构建错误的页面:警告留在终端,被页面上其他东西所抛出的错误,如浏览器扩展,不是远程的.
• allowedHosts 实值 'all',因为 dev 服务器已经用 CORS 来回答每个源 。 指定应用程序的主机以缩小范围, 例如 ['.appshell.org']。 。 。 .
• 一个警告 @appshell/react'从它的联邦运行时间的动态导入中'捆绑的事业被忽略了.

未列入因为他们是你的: 一个转接器,CSS和测试。 一个集装箱自己 合同也不包括在内。 工作空间 react-router 例如,添加了单通 结束 shared 以远方的大地发誓

appshellRemote({ …, shared: { 'react-router': { singleton: true, requiredVersion: dependencies['react-router'] } } });

继续出版

插件可以在每次成功构建后向 Appshell 注册机构发布生成的表, 如此跑动 --watch 工作时保留应用程序. 开发大楼 默认 ——你从不切换每个项目——而生产建设从不自行出版.

new AppshellPlugin({
  config: './path/to/appshell.config.yaml',
  // registry / application are usually omitted — see below.
  registry: 'https://registry.example.com', // optional override
  application: 'acme/my-dev', // optional: activate the published version here
});

默认情况下, 插件会遵从您的 CLI 语境 ——您设置的注册、申请和令牌 与 appshell config set 财务报告和审定财务报表 appshell login (存储于 ~/.appshell) (中文(简体) ). 就是这个背景 cLI 使用,所以一个机器级的设置驱动两种;一个项目不需要每个repo配置.

分辨率优先级, 每个字段: 明确的插件选项 APPSHELL_* (原始内容存档于2018-10-21) (中文(简体) ). env var ~/.appshell 上下文 – 默认。 当一个选项或env var指 某处,不是你坚持的上下文 插件警告它压倒它 .

在CI中没有 ~/.appshell这样 APPSHELL_REGISTRY, (中文(简体) ), APPSHELL_APPLICATION,以及 APPSHELL_TOKEN 是整个故事。 如果在开发中默认发布但无法解决注册,则构建 仍然成功 —— 以警告跳过出版 .

软件包在其 无 名称和版本,无范围——登记处负责范围 从你的标志。 两次发布相同的内容都是不开放的,所以一个重建的手表循环没有 一个版本的凸起是无害的。 出版 不同 现有版本下的内容通常 已拒绝; 在开发模式中, 插件请注册处覆盖它, 它是本地的( 未认证) 默认的注册荣誉,除非配置为 ALLOW_FORCE_PUBLISH。 。 。 .

失败的发布被报告为编译错误而不是抛出, 所以 --watch 报告并 继续跑.

什么是 appshell.config.yaml ?

由插件所消耗的配置文件,为Appshell主机提供远程切入点,路由,显示名称等额外信息和上下文.

样本 appshell.config.yaml

remotes:
  TestModule/Foo: # Must match the scope/module defined in ModuleFederationPlugin
    url: ${APPS_TEST_URL}/remoteEntry.js # Application variables will be expanded when the global runtime manifest is generated.
    metadata: # Use metadata to provide additional information
      route: ${FOO_ROUTE}
      displayName: Foo App
      displayGroup: primary
      order: 10
      icon: ViewList

  TestModule/Bar:
    url: ${APPS_TEST_URL}/remoteEntry.js
    metadata:
      route: /bar
      displayName: Bar App
      displayGroup: primary
      order: 20
      icon: ViewList

  BizModule/Biz:
    url: http://localhost:4040/remoteEntry.js
    metadata:
      route: /biz
      displayName: Biz App
      displayGroup: utility
      order: 30
      icon: ViewList

vars:
  RUNTIME_ARG_1: ${RUNTIME_ARG_1}
  RUNTIME_ARG_2: ${RUNTIME_ARG_2}
  RUNTIME_ARG_3: ${RUNTIME_ARG_3}

说明 变量扩展语法 ${CRA_MFE_URL}当 appshell manifest 生成实际运行时间环境值.

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

建筑时间会怎样?

插件释放出一个显示模板文件,用于生成 appshell manifest 在运行时间.

样本产出

{
  "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"
      }
    }
  }
}

我该如何生成应用软件清单?

使用 @ appshell/ cli (英语) 在启动脚本中 :

appshell generate manifest --template appshell.template.json

样本 appshell manifest数字 :

{
  "remotes": {
    "CraModule/App": {
      "id": "3eb81a0c",
      "url": "http://localhost:3000/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:5000/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"
    }
  }
}

选项

• options

插件的签名 :

网络包装. config.js

const { AppshellPlugin } = require('@appshell/webpack-plugin');

module.exports = {
  plugins: [
    new AppshellPlugin({
      config: './path/to/appshell.config.yaml',
    }),
  ],
};

Options

registry 财务报告和审定财务报表 application 通常省略——见 继续出版 为决议令.

许可证

麻省理工学院