モノリシックからマイクロフロントエンドまで-パート2

目次

Migrating React Application

Migrate to single-spa application

Configure Root Config

Migrating Angular Application

アプリケーションの移行 To migrate any existing React application I followed this documentation からsingle-spa また、このgithubの完全な解決策を見つけることができますrepo .
私は既に既存の反応アプリケーションを仮定しています.

シングルスパアプリケーションへの移行

Inside your React root folder application, install single-spa and single-spa-react 使用npm or yarn

npm i single-spa single-spa-react
// or with yarn
yarn add single-spa single-spa-react

ファイルを作成し、ルート名を指定します.アプリ.srcフォルダ内のJS (必要な名前を選択できます)

touch src/root.app.js

このファイルの中で、ルートコンポーネントを確立します.これは、出力されるトップレベルの反応コンポーネントです.我々のケースでは、アプリ内のアプリのコンポーネントになります.js
ルート内のコード.アプリ.JSはこのように見えるはずです
< div >
< br/>
この時点の終わりまでに、我々は現在我々がルート設定の中で登録できる単一のSPAアプリケーションを持っています
< H 3 >

設定の設定

Now let's configure our root-config, replace the code inside your index.js file with the code below

by doing this we are doing several steps, telling the single-spa to register your React application using registerApplication and start the application by calling the start() function.

この方法を使用してマイグレーションの利点
<高橋潤子>
<ウル>

我々は、同じを使用しているreact-script .

現在のエントリポイント(src/index)をハイジャックしているので、Webpackをゼロから設定する必要はありません.ので、必要はありませんeject 私たちの反応アプリケーションとウェブを再構成します.

< ull >
同じスクリプトを使ってアプリケーションを実行できますnpm start .

< hr/>
< H >

角度アプリケーションの移行

To migrate any existing Angular application I followed this documentation からsingle-spa 私は既に既存の角度アプリケーションを持っていると仮定しますbr/>
私の場合、アングルバージョン10

を使用しています
<ウル>

ルートフォルダ内で次のコマンドを実行します

< ull >
クラスをハイライト表示する

ng add single-spa-angular

< div >
< p >single-spa このコマンドは次のようになります.

• Install single-spa-angular.
• Generate a main.single-spa.ts in your project src/.
• Generate single-spa-props.ts in src/single-spa/.
• Generate asset-url.ts in src/single-spa/.
• Generate an EmptyRouteComponent in src/app/empty-route/, to be used in app-routing.module.ts.
• Add an npm script npm run build:single-spa.
• Add an npm script npm run serve:single-spa.

< p >としても::/p >
<ウル>

依存性として単一のスパを追加すると、デフォルトでインストールされていないので、それをインストールする必要があります、それはあなたのパッケージにのみ追加されます.JSON、手動でインストールできます

< ull >
クラスをハイライト表示する

npm i single-spa

< div >
またはあなたのルートフォルダでpackage.json ロケーション・ラン
<> P >
クラスをハイライト表示する

npm i

< div >
あなたの依存関係ツリーを更新し、不足しているパッケージをインストールします.p >
<ウル>

生成余分なウェブパック.設定.js

角度の内側の更新オプションをビルドします.@角devkit/ビルド角度の代わりに@角ビルダー/カスタムウェブパック
実行して他の依存関係をインストールする必要があります

< ull >
クラスをハイライト表示する

npm i @angular-builders/custom-webpack
npm i @types/[email protected] --saveDev

< div >
< H 4 >

移行完了の手順
<高橋潤子>
これらの手順のいくつかは、単一のSPAドキュメントでは文書化されていません.また、私はアプリケーションを移行している間にそれを考え出しました
<ウル>

内部app.module.ts ファイル

< ull >
クラスをハイライト表示する

import {APP_BASE_HREF} from '@angular/common';

< div >
このオブジェクトをproviders アレイ< br/>
<> P >
クラスをハイライト表示する

{provide: APP_BASE_HREF, useValue: '/'}

< div >
<ウル>

tsconfig内で.アプリ.JSON , ADDnode 型配列"types": ["node"]

パッケージ.JSON--deploy-url フラグをホストURLに設定する必要がありますStack Overflow answer .

< ull >
このマイグレーションの結果はコンパイル済みJSファイルです.移行終了後、このコマンドを使用して角度アプリケーションを実行できます
<> P >
クラスをハイライト表示する

npm run serve:single-spa:angular-app

< div >
<高橋潤子>http://localhost:4200/main.js

< hr/>
< H >

結論
<高橋潤子>
現在まで何をしてきたのか
<ウル>

既存の反応アプリケーションを移行しました.

コア設定ファイルを作成しました.

既存の角度アプリケーションを移行しました.

< ull >
完全な作業解はこのGithubで見つけることができますrepo , そして、それに応じて、各部分が公開されて更新されますp >
次の部分では、あなたのアングルアプリケーションをルート設定ファイルに登録する方法について話します.p >