Créer un micro frontend en utilisant React, Vue et Single SPA

Cet article vous présentera comment créer un micro front-end à l'aide de React, Vue et Single SPA. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Single SPA

Single SPA est un framework javascript pour les microservices front-end.

Il vous permet d'utiliser plusieurs frameworks dans une application d'une seule page, afin que vous puissiez diviser le code par fonction et permettre aux programmes Angular, React et Vue.js de s'exécuter ensemble.

Vous êtes peut-être habitué à la CLI de React et Vue. Ces outils peuvent créer rapidement des projets et préparer la configuration du webpack, les dépendances, le code passe-partout, etc.

Si vous êtes habitué à ce genre d'opération, vous trouverez peut-être la première moitié de cet article un peu fastidieuse. Parce que nous créons tout à partir de zéro, y compris l'installation de toutes les dépendances requises et la création de configurations Webpack et Babel à partir de zéro.

Environnement et configuration

Créez d'abord un nouveau répertoire sous le terminal et saisissez-le :

mkdir single-spa-app

cd single-spa-app

Ensuite, initialisez le fichier package.json :

npm init -y

Installez ensuite toutes les dépendances requises pour votre projet. Afin de faire comprendre à tout le monde ce qui est installé, je les ai divisés ici en étapes distinctes.

Installer les dépendances

Installer les dépendances régulières

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

Installer les dépendances 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

Installer les dépendances 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

Une fois toutes les dépendances installées, créez la structure de répertoires.

Nous mettons le code du projet dans le répertoire src. Incluez des sous-dossiers pour chaque programme dans le répertoire. Continuez à créer des répertoires pour les programmes react et vue dans le répertoire src :

mkdir src src/vue src/react

Configurez webpack et babel ci-dessous.

Configuration de l'environnement

Configuration Webpack

Dans le répertoire racine du programme principal, créez un fichier webpack.config.js et ajoutez le contenu suivant :

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
  }
};

Configuration babel

Créez un fichier .babelrc dans le répertoire racine et ajoutez le contenu suivant :

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

Initialiser Single-spa

Cette étape consiste à vous inscrire votre application, utilisée pour indiquer à single-spa le timing et la méthode pour trouver, charger et désinstaller le programme.

Dans le fichier webpack.config.js, définissez l'entrée sur single-spa.config.js.

Créez ce fichier dans le répertoire racine du projet et configurez-le.

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();

Ce fichier est utilisé pour enregistrer chaque partie de l'application principale d'une seule page développée à l'aide de différents frameworks. A chaque appel de registerApplication, une nouvelle application est enregistrée, qui accepte trois paramètres :

1. Le nom de l'application
2. La fonction à charger (le point d'entrée à chargé)
3. Fonction utilisée pour activer (logique utilisée pour indiquer s'il faut charger l'application)

Ensuite, vous devez créer du code pour chaque application.

Application React

Crée les deux fichiers suivants dans le répertoire 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

Application Vue

Créez les deux suivants dans le src/vue Fichiers du répertoire :

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>

Ensuite, dans Créer un fichier index.html dans le répertoire racine du programme :

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>

Mettre à jour Package.json avec un script

Ajouter au package .json Scripts de démarrage et de build :

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

Exécutez le programme

Exécutez le programme en exécutant start :

npm start

Désormais accessible via l'URL suivante :

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

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

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

Résumé

À l'exception de la configuration au début, les autres travaux sont très simples. Ce serait bien si, à l'avenir, Single-spa pouvait ajouter une CLI pour gérer le passe-partout et la configuration initiale du projet.

Si vous avez besoin d'une architecture de type micro-frontend, alors Single-spa est sans aucun doute la méthode la plus mature actuellement.

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

Auteur : Nader Dabit

Recommandations associées :

Résumé des questions d'entretien avec vue frontale 2020 (avec réponses)

Recommandation du didacticiel Vue : les 5 dernières sélections de didacticiels vidéo vue.js en 2020

Pour plus de connaissances liées à la programmation, veuillez visiter : Introduction à la programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!