最初のテストマイクロサービス（singleSpa）の前端

1.基本概念

マイクロフロントエンドアーキテクチャを実現する、それは4つの部分に分けることができる（参照：HTTPS：//alili.tech/archive/11052bf4/）

ローダ：コアマイクロアーキテクチャのフロントエンドであり、スケジューリングサブための主要なアプリケーションは、それが電源として理解することができるサブアプリケーション表示するときに決めます。

ラッパー：ローダーを使用すると、既存のアプリケーションは、電源アダプタに対応してローダーを使用できるようにパッケージ化することができます。

主な用途：通常、すべての子の使用共通部分のエントリが含まれている - と同等の電気拠点です

サブアプリケーション：アプリケーションの数は、アプリケーションのメインのコンテンツ領域に表示された - あなたが使用したい機器に相当します

したがって、そのような概念がある：電源（ローダ）→電源アダプタ（ラッパー）→️器具ベース（ホストアプリケーション）→️コレクタ（サブアプリケーション）️

全体的に、これはプロセスです：index.htmlをへのユーザーアクセス、ブラウザはローダーのjsファイルを実行し、ローダーの設定ファイルに移動し、各サブアプリケーション構成ファイルを登録している、最初のロードメインアプリケーション（メニュー、など）、次いで、ルートは、動的リモートローディングサブアプリケーションによって決定されます。

2.予備知識

2.1 SystemJs

SystemJSはES6のための伝統的なモジュールとモジュールをサポートし、インポートモジュールに共通の方法を提供します。

SystemJsは2つのバージョン6.xのバージョンがブラウザで使用されている、バージョン0.21があります二つの異なる方法を使用し、ブラウザおよびノード環境で使用されています。（参考：https://github.com/systemjs/systemjs）

マイクロサービスでは、主ローダーとして機能します。

2.2 singleSpa

単一スパアプリケーションは、フロントエンド・アプリケーション・フレームワークで一緒に複数のジャバスクリプトのセットです。ラッパーとして主な行為。（参考：https://single-spa.js.org/docs/getting-started-overview.html）

3.マイクロ・サービスの実践

3.1アプリケーションを作成するには

まず、マスターアプリケーションはiframeを作成し、単に静的リソースからサービスにアクセスすることができます主な用途は、することができます。

NPMのinit初期化して、index.htmlを作成し、簡単なハロー世界を書き、インストールの依存関係は、私が-S-を提供NPM。

「サーブ」のスクリプトpackage.jsonに起動コマンドを増やし：「-s -l 7000仕えます」。実行した後、あなたはハロー世界を見ることができます。

次いで、三つのサブアプリケーション、Iは（ルーティング書き込むために使用される）ナビゲーションバーアプリケーションを作成するために、それぞれ、VUE-cli2.0を使用し、プログラム1（アプリケーション1）、PROGRAM2（アプリケーション2）を作成します。

：ナビゲーションバーのアプリケーションとしてのみ、うまく2つのリンクを置きます

そしてルーティングPROGRAM2 PROGRAM1サブアプリケーションは、以下のように、スイッチング・アプリケーションへのルートとして、サブ経路について増加して、対応する項目名プレフィックスと組み合わされます。

3.2変換サブアプリケーション

まず、サブパッケージのアプリケーションは、それぞれのサブアプリケーションがNPM IシングルSPA-VUE systemjs-WebPACKの-相互運用機能を依存する必要があり、main.jsファイルのエントリを変更、次のとおりです。

ラッパーのシングルSPA-VUE VUEプロジェクトどちらである、systemjs-WebPACKの-相互運用NPMあなたが一緒のWebPACKとsystemjs作業を行うことができますコミュニティ維持ライブラリです。

WebPACKの出力に加えて、構成設定を増やす必要があります

3.3メインアプリケーションファイルを変更します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <meta name="importmap-type" content="systemjs-importmap">
    <script type="systemjs-importmap">
        {
          "imports": {
            "navbar": "http://localhost:8080/app.js",
            "program1": "http://localhost:8081/app.js",
            "program2": "http://localhost:8082/app.js",
            "single-spa": "https://cdnjs.cloudflare.com/ajax/libs/single-spa/4.3.7/system/single-spa.min.js"
          }
        }
      </script>
    <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/single-spa/4.3.7/system/single-spa.min.js" as="script" crossorigin="anonymous" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.1.1/system.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.1.1/extras/amd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.1.1/extras/named-exports.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.1.1/extras/named-register.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.1.1/extras/use-default.min.js"></script>
</head>
<body>
    <script>
        (function(){
            System.import('single-spa')
            .then((res)=>{
                var singleSpa=res;
            
                singleSpa.registerApplication('navbar',()=>System.import('navbar'),location=>true);

                singleSpa.registerApplication('program1',()=>System.import('program1'),(location)=>{
                    return location.hash.startsWith(`#/program1`);
                });

                singleSpa.registerApplication('program2',()=>System.import('program2'),(location)=>{
                    return location.hash.startsWith(`#/program2`);
                });

                singleSpa.start();
            })
        })()
    </script>
</body>
</html>

registerApplication函数包含四个参数，

appName: 注册的应用名称；

applicationOrLoadingFn：应用入口文件（必须是一个函数，返回一个函数或者一个promise）；

activityFn：控制应用是否激活的函数（必须是一个纯函数，接受window.location作为参数，返回一个boolean）；

customProps：在包装器生命周期函数中传递给子应用的props（应该是一个对象，可选）。

补充：有些小伙伴说运行demo会报错，这里说明下，因为后面把公共依赖抽离出去了，所以这里可能需要加上公共依赖。

start函数必须在子应用加载完后才能调用。在调用之前，子应用已经加载了只是未被渲染。

3.4 运行项目

分别运行navbar，program1，progarm2项目，然后运行iframe项目。iframe项目运行在7000端口，其他子应用分别运行在8080，8081,8082端口。从7000端口去请求其他端口的入口文件会跨域，所以在子应用中增加跨域设置。

在子应用的webpack.dev.config.js中找到devSever配置项，增加headers：{"Access-Control-Allow-Origin":"*"}配置。

然后重新运行项目即可。

4.项目整合

以上只是在开发环境中使用，接下来尝试不分别启动服务，只启用一个服务来跑项目。大体思路是使用express搭建一个服务，将子应用全部打包到项目上作为静态资源访问，入口html使用ejs模板来实现项目配置，而不再写死。

4.1 使用express生成器生成项目

4.2 修改子应用打包配置

这样子应用就全部打包到express应用中作为静态资源使用了。

4.3 增加应用配置文件

将iframe的index.html的内容复制到express的入口ejs中。增加配置文件apps.config.json和apps.config.js。

apps.config.js作用就是根据apps.config.json在静态资源文件夹下生成一份新的配置文件，将配置文件中的资源名称通过正则匹配成完整的资源路径。并且监听文件变化来更新静态资源文件夹下的配置文件。

生成的配置文件

4.4根据这个生成的配置文件去修改ejs，将项目注册过程循环出来，而不再是写死的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <meta name="importmap-type" content="systemjs-importmap">
    <script type="systemjs-importmap">
        {
          "imports": {
            <%for(var i=0;i<apps.length;i++){%>
              "<%= apps[i].name %>":"<%= apps[i].server %><%=apps[i].resourceEntryUrl %>",
            <%}%>
            "single-spa": "https://cdnjs.cloudflare.com/ajax/libs/single-spa/4.3.7/system/single-spa.min.js"
          }
        }
      </script>
    <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/single-spa/4.3.7/system/single-spa.min.js" as="script" crossorigin="anonymous" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.1.1/system.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.1.1/extras/amd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.1.1/extras/named-exports.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.1.1/extras/named-register.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.1.1/extras/use-default.min.js"></script>
</head>
<body>
    <script>
        (function(){
            Promise.all([
                System.import('single-spa'),
                System.import('./apps.config.json')
            ])
            .then((res)=>{
                var singleSpa=res[0];
                var configs=res[1].default;
            
                configs.apps.forEach( project => {
                  if(project.resource.length>0){
                    Promise.all(project.resource.map(i=>{
                      return System.import(project.server+i)
                    })).then(function(){
                      singleSpa.registerApplication(project.name,()=>System.import(project.name),(location)=>{
                          return project.base?true:location.hash.startsWith(`#/${project.name}`);
                      });
                    })
                  }else{
                    singleSpa.registerApplication(project.name,()=>System.import(project.name),(location)=>{
                        return project.base?true:location.hash.startsWith(`#/${project.name}`);
                    });
                  }
                });

                singleSpa.start();
            })
        })()
    </script>
</body>
</html>

实际渲染出来是

4.5 优化打包配置

因为三个子项目都用到了相同的一部分依赖，可以考虑将公用的依赖不打包进去，改为在主项目主引入来提高打包效率

修改子应用的webpack.base.config.js，增加配置项

在主应用中引入依赖

4.5 增加react应用

同样是使用webpack打包，不同是包装器不一样。其他基本上是一样的思路即可。

最终demo

转自https://www.cnblogs.com/scdisplay/p/11648701.html

最初のテストマイクロサービス（singleSpa）の前端

おすすめ