标签: single-spa

我正在使用 Typescript + Vite + Single SPA 只是尝试复制https://github.com/joeldenning/vite-single-spa-example 和https://github.com/joeldenning/vite-single-spa-root-配置。

因此，在我的 index.ejs 中我有

  <script type="systemjs-importmap">
{
  "imports": {
   "@org/root-config": "//localhost:9000/org-root-config.js",
    "@my/module": "http://127.0.0.1:8080/assets/index.d4261135.js"
  }
}

在 org-root-config.js 中我有

import { registerApplication, start } from "single-spa";

registerApplication({
  name: "@my/module",
  app: () => System.import("@my/module"),

  activeWhen: "/",
});

start({
  urlRerouteOnly: true,
});

关于MF本身，我有以下Vite配置：

import vue from '@vitejs/plugin-vue';
import { nodeResolve } from '@rollup/plugin-node-resolve';

export default {
  rollupOptions: {
    input: 'src/main.ts',
    format: 'system',
    preserveEntrySignatures: true,
  },
  base: 'http://localhost:3000',
  plugins: [
    vue({
      template: { …

我是反应新手..我有反应应用程序，我已将其迁移到 Single-SPA。为了将我的应用程序与主应用程序（具有许多 Vue single-spa 应用程序的平台）集成，我将其重新构造为

MainApp - 它包括与进程相关的所有页面 - 在 localhost:3000 下运行

root-html-file - 它包括一个index.html和package.json文件index.html（在localhost:5000下运行-由SPA生成）

代码： root-html-file -> index.html

<script type="systemjs-importmap">
      {
        "imports": {
    "myapp": "http://localhost:3000/",
    "single-spa": "https://cdnjs.cloudflare.com/ajax/libs/single-spa/4.3.7/system/single-spa.min.js",
    "react": "https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.development.js"
     }}</script>

Promise.all([System.import('single-spa'),System.import('react')]).then(function (modules) {
          var singleSpa = modules[0];
            singleSpa.registerApplication(
                'myapp',
                () => System.import('myapp'),
                location => true
            );
          singleSpa.start();

myapp 应用程序作为独立的工作正常。仅当运行 root-html-file 应用程序（npm runserve）时，该应用程序会将 myapp 应用程序加载到其中，从而导致 CROS origin 问题。请查看屏幕截图

如果我方向错误，请指导我。

我正在开发一个微前端项目，使用 vue 3 和 single-spa 5.9.3。我试图将一个微前端 npm 包更新到最新版本，它构建正确，但抛出此错误：

"TypeError: application '@myapp/my-module' died in status LOADING_SOURCE_CODE: Cannot read properties of undefined (reading 'meta')
    at autoPublicPath (http://localhost:9200/js/app.js:48439:32)
    at Object../node_modules/systemjs-webpack-interop/auto-public-path/2.js (http://localhost:9200/js/app.js:48418:1)
    at __webpack_require__ (http://localhost:9200/js/app.js:75668:33)
    at http://localhost:9200/js/app.js:76740:11
    at Object.<anonymous> (http://localhost:9200/js/app.js:76744:12)
    at Object.execute (https://cdn.jsdelivr.net/npm/systemjs@6.7.0/dist/extras/amd.min.js:1:529)
    at i (https://cdn.jsdelivr.net/npm/systemjs@6.7.0/dist/system.min.js:4:4539)
    at e (https://cdn.jsdelivr.net/npm/systemjs@6.7.0/dist/system.min.js:4:5014)
    at https://cdn.jsdelivr.net/npm/systemjs@6.7.0/dist/system.min.js:4:5019"

我的“@myapp/my-module”package.json 依赖项如下所示：

  "dependencies": {
    "core-js": "^3.6.5",
    "axios": "^0.24.0",
    "object-path": "^0.11.8",
    "quasar": "^2.5.5",
    "single-spa-vue": "^2.1.0",
    "vue": "^3.2.29",
    "vue-i18n": "^9.1.6",
    "vue-inline-svg": "^3.1.0",
    "vue-router": "^4.0.0-0",
    "vue-axios": "^3.4.0",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@types/jest": "^27.4.1",
    "@typescript-eslint/eslint-plugin": "^5.4.0", …

我在尝试在 Single-SPA 应用程序中启动子应用程序时遇到错误。基本上，我正在尝试开发一种 util 应用程序（Single-SPA 中的子应用程序），其中包含 Sockjs、Stomp-client 等。我删除了节点模块和 package-lock.json 并再次安装了节点模块。当我尝试启动应用程序时，我遇到以下错误。

Error:
[webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'firewall'. These properties are valid:
   object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, setupExitSignals?, static?, watchFiles?, webSocketServer? }
 - options.client has an unknown property 'host'. These properties are valid:
   object …

我在 single-spa 应用程序中使用 vue-2 项目，并且在项目的每次热重新加载时都会收到此错误。尽管重新加载本身似乎工作正常。

我了解如何在使用时将自定义道具传递给不同的微应用程序single-spa，但我想知道如何获取 api 调用表单 app1 的输出并在 app2 中使用它。app1 正在使用react-redux，app2 将使用react hooks。

import {registerApplication, start} from 'single-spa'


registerApplication(
    'navBar',          // Name of this single-spa application
    () => import('./nav/navbar.app.js').then(module => module.navBar),
    () => true
)

registerApplication(
  'app1',          // Name of this single-spa application
  () => import('./root.app.js'),//loadingFunction, // Our loading function
  () => true, //activityFunction // Our activity function
)

registerApplication(
    'app2',          // Name of this single-spa application
    () => import('./app2/app2.app.js').then(module => module.app2),
    location =>
        location.pathname === '/app2' …

我们正在考虑将 single-spa.js 用于微前端。人们提出的一个问题是，单一 SPA 应用程序是否也可以是渐进式 Web 应用程序 (PWA)。搜索并未透露有关此事的太多信息。如果重要的话，各个应用程序将是反应应用程序。提前致谢。

不管你信不信，我花了一些时间试图找到一种将网站图标添加到Single Spa应用程序的方法：)。我在框架文档中找不到任何内容。有一些关于静态资产的零碎信息，但它对我并没有多大帮助。我最终意识到这与 Webpack 配置有关。请参阅下面我的回答。

我正在为我当前的项目使用单个 spa 并希望有一个加载程序，直到我的微应用程序被加载并且这些微应用程序之间会有一个切换，在这种情况下我也想显示一个加载程序。有没有办法达到同样的目标？

根据 single-spa 官方文档，我们可以使用 RxJs 共享应用程序的 UI 状态。

Observables / Subjects (RxJs) - 一个微前端向一个流发出新值，该流可以被任何其他微前端使用。它从其浏览器模块中将 observable 导出到所有微前端，以便其他人可以导入它。

链接：https : //single-spa.js.org/docs/recommended-setup/#ui-state

链接：https : //single-spa.js.org/docs/faq/#how-can-i-share-application-state-between-applications

我试图在 React 中创建一个示例，其中我使用 single-spa 包裹将我的微应用程序包含在根应用程序中。我试图使用 RxJs 共享 UI 状态。当我在 google 上搜索 single-spa RxJs 时，我什么也没找到。谁能为我提供一个基本示例，我将能够为以下用例共享 UI 状态：

• 将 UI 状态从根应用程序共享到我的微应用程序。
• 将 UI 状态从微应用共享到根应用。
• 在微应用之间共享 UI 状态。

我有以下 3 个 TypeScript 项目：

1. 根配置
2. 包裹，我们称之为my-app
3. 浏览器中的实用程序模块，我们称之为api

以上所有项目都是使用create-single-spa命令生成的。

在api/src/lomse-api.ts文件中，我导出fetchPeople模块，如下所示：

export { fetchPeople } from "./PeopleApi.ts";

根据single-spa 文档，鉴于我的orgNameislomse和projectNameis api，我应该能够将fetchPeople模块导入到my-app（包裹应用程序）中，如下所示：

import { fetchPeople } from '@lomse/api'

由于my-app项目是一个 TypeScript 项目，上面的语句肯定会抛出以下错误：

Cannot find module '@lomse/api' or its corresponding type declarations.

有没有办法来解决这个问题？

我是单页应用程序 (SPA) 的新手。我创建了 3 个独立的应用程序，其中一个是根配置应用程序，另外两个充当子应用程序。我们需要单独运行这些子应用程序之一。

但部署的应用程序出现以下错误：

你的微前端不在这里

我可以知道如何在本地完成它当我从本地运行它时它成功运行吗

npm run start:standalone  command