Maison > Article > interface Web > 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 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.
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.
npm install react react-dom single-spa single-spa-react single-spa-vue vue
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
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.
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 } };
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" ] }
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.
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 :
Ensuite, vous devez créer du code pour chaque application.
Crée les deux fichiers suivants dans le répertoire src/react :
touch main.app.js root.component.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, ];
import React from "react" const App = () => <h1>Hello from React</h1> export default App
Créez les deux suivants dans le src/vue Fichiers du répertoire :
touch vue.app.js main.vue
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, ];
<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
<html> <body> <p id="react"></p> <p id="vue"></p> <script src="/dist/single-spa.config.js"></script> </body> </html>
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 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
À 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!