单页面应用门户示例项目教程

单页面应用门户示例项目教程

single-spa-portal-exampleExample project on how to combine multiple SPA's on a single Website项目地址:https://gitcode.com/gh_mirrors/si/single-spa-portal-example

1. 项目的目录结构及介绍

single-spa-portal-example/
├── apps/
│   ├── app1/
│   ├── app2/
│   └── app3/
├── root-config/
├── package.json
├── README.md
└── webpack.config.js

• apps/: 包含三个子应用，分别是 app1, app2, 和 app3。每个子应用都有自己的目录结构和配置文件。
• root-config/: 包含根配置文件，用于管理子应用的加载和路由。
• package.json: 项目的依赖管理文件，包含所有子应用和根配置的依赖。
• README.md: 项目的基本介绍和使用说明。
• webpack.config.js: 项目的 Webpack 配置文件，用于构建和打包。

2. 项目的启动文件介绍

在 root-config/ 目录下，主要的启动文件是 index.ejs 和 root-config.js。

• index.ejs: 这是项目的入口 HTML 文件，包含了加载根配置脚本的代码。
• root-config.js: 这是根配置的主要 JavaScript 文件，负责初始化和配置子应用的路由和加载。

3. 项目的配置文件介绍

• package.json: 包含了项目的依赖和脚本命令。例如：

  {
    "name": "single-spa-portal-example",
    "version": "1.0.0",
    "scripts": {
      "start": "webpack-dev-server --config webpack.config.js"
    },
    "dependencies": {
      "single-spa": "^5.9.0"
    }
  }
  

• webpack.config.js: 包含了 Webpack 的配置，用于构建和打包项目。例如：

  const path = require('path');
  
  module.exports = {
    entry: {
      'root-config': 'root-config/root-config.js'
    },
    output: {
      filename: '[name].js',
      path: path.resolve(__dirname, 'dist')
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader'
          }
        }
      ]
    }
  };
  

通过以上配置，可以启动和运行 single-spa-portal-example 项目，实现多个子应用的单页面应用门户。

single-spa-portal-exampleExample project on how to combine multiple SPA's on a single Website项目地址:https://gitcode.com/gh_mirrors/si/single-spa-portal-example