React、Vue、単一 SPA を使用してマイクロ フロントエンドを作成する

この記事では、React、Vue、Single SPA を使用してマイクロ フロント エンドを作成する方法を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

Single SPA

Single SPA は、フロントエンド マイクロサービス用の JavaScript フレームワークです。

単一ページ アプリケーションで複数のフレームワークを使用できるため、コードを関数ごとに分割し、Angular、React、および Vue.js プログラムを一緒に実行できるようになります。

React や Vue の CLI には慣れているかもしれませんが、これらのツールを使用すると、プロジェクトをすばやく作成し、Webpack の構成、依存関係、ボイラープレート コードなどを準備できます。

この種の操作に慣れている場合、この記事の前半は少し面倒に感じるかもしれません。必要な依存関係をすべてインストールし、Webpack と Babel 構成を最初から作成するなど、すべてを最初から作成しているためです。

環境と構成

まず、ターミナルの下に新しいディレクトリを作成し、そこに入力します:

mkdir single-spa-app

cd single-spa-app

次に、package.json ファイルを初期化します:

npm init -y

次に、プロジェクトに必要なすべての依存関係をインストールします。何がインストールされるのかを誰にでも明確にするために、ここではそれらを個別のステップに分けました。

依存関係のインストール

通常の依存関係のインストール

npm install react react-dom single-spa single-spa-react single-spa-vue vue

babel の依存関係のインストール

npm install @babel/core @babel/plugin-proposal-object-rest-spread @babel/plugin-syntax-dynamic-import @babel/preset-env @babel/preset-react babel-loader --save-dev

Webpack の依存関係のインストール

npm install webpack webpack-cli webpack-dev-server clean-webpack-plugin css-loader html-loader style-loader vue-loader vue-template-compiler --save-dev

すべての依存関係が完了したらインストールしたら、ディレクトリ構造を作成します。

プロジェクト コードを src ディレクトリに置きます。ディレクトリ内に各プログラムのサブフォルダーを含めます。引き続き、src ディレクトリに react および vue プログラム用のディレクトリを作成します。

mkdir src src/vue src/react

以下で webpack と babel を構成します。

環境構成

Webpack の構成

メイン プログラムのルート ディレクトリに、webpack.config.js ファイルを作成し、次の内容を追加します。 :

const path = require('path');
const webpack = require('webpack');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  mode: 'development',
  entry: {
    'single-spa.config': './single-spa.config.js',
  },
  output: {
    publicPath: '/dist/',
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }, {
        test: /\.js$/,
        exclude: [path.resolve(__dirname, 'node_modules')],
        loader: 'babel-loader',
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ],
  },
  node: {
    fs: 'empty'
  },
  resolve: {
    alias: {
      vue: 'vue/dist/vue.js'
    },
    modules: [path.resolve(__dirname, 'node_modules')],
  },
  plugins: [
    new CleanWebpackPlugin(),
    new VueLoaderPlugin()
  ],
  devtool: 'source-map',
  externals: [],
  devServer: {
    historyApiFallback: true
  }
};

babel の構成

ルート ディレクトリに .babelrc ファイルを作成し、次の内容を追加します:

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "browsers": ["last 2 versions"]
      }
    }],
    ["@babel/preset-react"]
  ],
  "plugins": [
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-proposal-object-rest-spread"
  ]
}

Initialize Single-spa

これ 最初のステップは、プログラムをいつ、どのように検索、ロード、アンインストールするかを single-spa に伝えるためにアプリケーションを登録することです。

webpack.config.js ファイルで、エントリを single-spa.config.js に設定します。

このファイルをプロジェクトのルート ディレクトリに作成し、設定します。

single-spa.config.js

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

registerApplication(
  'vue', 
  () => import('./src/vue/vue.app.js'),
  () => location.pathname === "/react" ? false : true
);

registerApplication(
  'react',
  () => import('./src/react/main.app.js'),
  () => location.pathname === "/vue"  ? false : true
);

start();

このファイルは、メインのシングルページ アプリケーションのさまざまなフレームワークを使用して開発された各パーツを登録するために使用されます。 registerApplication が呼び出されるたびに、新しいアプリケーションが登録され、次の 3 つのパラメータを受け取ります:

1. アプリケーションの名前
2. ロードされる関数 (ロードするエントリ ポイント)
3. アクティブ化に使用する関数 (アプリケーションをロードするかどうかを指示するロジック)

次に、アプリケーションごとにコードを作成する必要があります。

React アプリケーション

次の 2 つのファイルを src/react ディレクトリに作成します:

touch main.app.js root.component.js

src/react/main.app.js

import React from 'react';
import ReactDOM from 'react-dom';
import singleSpaReact from 'single-spa-react';
import Home from './root.component.js';

function domElementGetter() {
  return document.getElementById("react")
}

const reactLifecycles = singleSpaReact({
  React,
  ReactDOM,
  rootComponent: Home,
  domElementGetter,
})

export const bootstrap = [
  reactLifecycles.bootstrap,
];

export const mount = [
  reactLifecycles.mount,
];

export const unmount = [
  reactLifecycles.unmount,
];

src/react/root.component.js

import React from "react"

const App = () => <h1>Hello from React</h1>

export default App

Vue application

次の 2 つのファイルを src/vue ディレクトリに作成します。

touch vue.app.js main.vue

src/vue/vue.app.js

import Vue from 'vue';
import singleSpaVue from 'single-spa-vue';
import Hello from './main.vue'

const vueLifecycles = singleSpaVue({
  Vue,
  appOptions: {
    el: '#vue',
    render: r => r(Hello)
  } 
});

export const bootstrap = [
  vueLifecycles.bootstrap,
];

export const mount = [
  vueLifecycles.mount,
];

export const unmount = [
  vueLifecycles.unmount,
];

src/vue/main.vue

<template>
  <p>
      <h1>Hello from Vue</h1>
  </p>
</template>

次に、プログラムのルート ディレクトリにindex.html ファイルを作成します。

touch index.html

index.html

<html>
  <body>
    <p id="react"></p>
    <p id="vue"></p>
    <script src="/dist/single-spa.config.js"></script>
  </body>
</html>

スクリプトを使用して Package.json を更新します

package.json に起動スクリプトとビルド スクリプトを追加します:

"scripts": {
  "start": "webpack-dev-server --open",
  "build": "webpack --config webpack.config.js -p"
}

実行プログラム

start を実行してプログラムを実行します。

npm start

これで、次の URL からアクセスできるようになります:

# 渲染基于所有框架的程序
http://localhost:8080/

# 只渲染 react
http://localhost:8080/react

# 之渲染 vue
http://localhost:8080/vue

summary

例外を除きます。スタート 設定以外のタスクは非常に簡単です。将来的には、Single-spa にボイラープレートとプロジェクトの初期セットアップを処理するための CLI が追加されると良いでしょう。

マイクロフロントエンドタイプのアーキテクチャが必要な場合は、シングルスパが現在最も成熟した方法であることは間違いありません。

原文: https://dev.to/dabit3/building-micro-frontends-with-react-vue-and-single-spa-52op

著者: Nader Dabit

関連する推奨事項:

2020 フロントエンド Vue インタビューの質問の概要 (回答付き)

vue チュートリアルの推奨事項: 2020 年の最新の vue.js ビデオ チュートリアル 5 選

プログラミング関連の知識の詳細については、

プログラミング入門をご覧ください。 ！

以上がReact、Vue、単一 SPA を使用してマイクロ フロントエンドを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。