Single-Spa 实践（下）-- 拆分子应用不同目录

最新推荐文章于 2024-01-31 08:30:00 发布

Felix皇子

最新推荐文章于 2024-01-31 08:30:00 发布

阅读量621

点赞数

分类专栏：前端开发文章标签： react single-spa 微前端

本文链接：https://blog.csdn.net/F_Felix/article/details/110585819

版权

本文介绍了如何将Single-Spa应用的子应用拆分到不同的目录并独立管理，包括从主目录拆分、修改主应用Webpack配置、改造子应用Webpack配置、设置importmap以及使用Chrome扩展辅助开发。通过这些步骤，实现了子应用的独立运行和路由切换。

摘要由CSDN通过智能技术生成

Single-Spa 实践（下）-- 拆分子应用不同目录

在上篇中讲到了，在同一个目录下创建主应用以及子应用，但是这样的话其实还是感觉像一个大应用，并且别的模块在维护的时候还需要把整个项目 clone 下来，感觉还是欠缺了点什么。

在这篇中大致上还是基于上看的结构，接着把上面的结构完全拆开来，拆分到单独的 repo，可以分为如下几个结构：
1. 根(主)应用： root-config
2. 子应用1: app1
3. 子应用2: app2

接着一步步来

Step 1

把 app1 和 app2 从 micro-front 文件下拆分出来，与 micro-front 同级，基本需要包含如下的文件

|—— micro-front
	|——— index.ejs // 页面
	|——— package.json 
	|——— webpack.config.config
	|——— single-spa.config.js // 主应用的的 single-spa 配置
|—— app1
	|——— src
		|——— App.js // 子应用
		|——— react-mf-app1.js // 子应用的 single-spa 配置
		|——— set-public-path.js // 暴露子应用
	|——— package.json
	|——— webpack.config.config
|—— app2
	|——— src
		|——— App.js
		|——— react-mf-app2.js
		|——— set-public-path.js
	|——— package.json
	|——— webpack.config.config

Step 2

修改 mirco-front 的 webpack 配置

const path = require("path");
const {
    CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = () => {
   
    const result = {
   
        entry: path.resolve(__dirname, "./single-spa.config"),
        output: {
   
            filename: "single-spa.config.js",
            libraryTarget: "system",
            path: path.resolve(__dirname, "dist"),
        },
        devtool: "sourcemap",
        module: {
   
            rules: [
                {
    parser: {
    system: false } },
                {
   
                    test: /\.js$/,
                    exclude: /node_modules/,
                    use: [{
    loader: "babel-loader" }],
                },
            ],
        },
        devServer: {
   
            historyApiFallback