返回

qiankun 微前端架构：使用 Hash 路由从零开始的开发指南

前端

在现代 Web 开发中，微前端架构已成为构建复杂应用程序的流行方法。微前端将大型应用程序分解成更小的、独立的模块，称为微前端。这些微前端可以独立开发、部署和管理，从而提高灵活性、可维护性和可扩展性。

在微前端架构中，路由扮演着至关重要的角色。它决定了用户如何与应用程序交互以及如何从一个微前端导航到另一个微前端。在本文中，我们将重点介绍使用 Hash 路由在 qiankun 微前端架构中从零开始开发应用程序的指南。

qiankun 介绍

qiankun 是一个流行的 JavaScript 库，用于在单页面应用程序 (SPA) 中集成微前端。它提供了一组开箱即用的功能，包括路由、状态管理和通信。qiankun 支持多种路由模式，包括 Hash 路由和 History 路由。

Hash 路由

Hash 路由是一种使用 URL 中的 hash 片段（#）的路由技术。它不依赖服务器端配置，因此易于部署和管理。Hash 路由在现代 Web 应用程序中非常普遍，因为它不涉及页面重新加载，从而提供更流畅的用户体验。

从零开始开发

现在，让我们一步一步地使用 Hash 路由在 qiankun 中构建一个简单的微前端应用程序：

  1. 初始化 qiankun 项目

使用以下命令创建 qiankun 项目：

npx create-qiankun-app my-qiankun-app --template hash
  1. 创建微前端

在主应用程序和微前端之间创建两个文件夹：

mkdir main-app
mkdir micro-app
  1. 配置主应用程序

在 main-app/package.json 中，添加以下依赖：

{
  "dependencies": {
    "qiankun": "^3.0.0"
  }
}

在 main-app/index.html 中，添加以下代码：

<body>
  <div id="root"></div>

  <script src="main.js"></script>
</body>

在 main-app/main.js 中，添加以下代码：

import { registerMicroApps, runAfterFirstMounted, setDefaultMountApp } from 'qiankun';

registerMicroApps([
  {
    name: 'micro-app',
    entry: '//localhost:8080/app.js',
    container: '#root',
    activeRule: '/micro-app'
  }
]);

runAfterFirstMounted(() => {
  setDefaultMountApp('/micro-app');
});
  1. 配置微前端

在 micro-app/package.json 中，添加以下依赖：

{
  "dependencies": {
    "react": "^17.0.0",
    "react-dom": "^17.0.0",
    "qiankun": "^3.0.0"
  }
}

在 micro-app/index.html 中，添加以下代码：

<!DOCTYPE html>
<html>
  <head>
    <script src="app.js"></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

在 micro-app/app.js 中，添加以下代码：

import React from 'react';
import ReactDOM from 'react-dom';

const App = () => {
  return <h1>微前端示例</h1>;
};

ReactDOM.render(<App />, document.getElementById('app'));
  1. 运行应用程序

分别在 main-app 和 micro-app 目录中运行以下命令：

# 主应用程序
npm start

# 微前端
npm start

打开浏览器并访问 http://localhost:3000/micro-app。您应该看到带有文本“微前端示例”的页面。

结论

本指南展示了如何使用 Hash 路由在 qiankun 中从零开始开发微前端应用程序。通过将大型应用程序分解成更小的、独立的模块，微前端架构提供了更高的灵活性、可维护性和可扩展性。使用 Hash 路由使路由管理变得简单，并提供了一种流畅的用户体验。