微前端 qiankun 入门

前端

2023-11-04 01:05:46

💾《零起点带你领略微前端 qiankun 的精彩世界》💾

微前端 qiankun 入门

微前端 qiankun 入门指南，助你轻松掌握微前端开发技巧，打造模块化、高性能的前端应用。

微前端的崛起

微前端架构近年来受到广泛关注，它是一种将前端应用程序分解为多个独立模块的开发模式。每个模块可以由不同的团队独立开发和维护，并通过统一的框架集成到一起。微前端架构的兴起得益于以下几个因素：

技术栈多元化： 随着前端技术的发展，各种新的框架和库层出不穷，微前端架构可以使团队选择最适合自己业务场景的技术栈，而无需在整个应用程序中保持一致。
团队协作与独立开发： 微前端架构使团队能够独立开发和维护自己的模块，提高开发效率和敏捷性。团队可以并行工作，无需等待其他团队完成开发任务，从而缩短应用程序的开发周期。
可扩展性和可维护性： 微前端架构使应用程序更易于扩展和维护。当需要添加新功能或修改现有功能时，团队可以只对受影响的模块进行修改，而无需对整个应用程序进行修改。这极大地提高了应用程序的可维护性和可扩展性。

qiankun 简介

qiankun 是一个基于 Single-SPA 实现的微前端框架，它可以帮助您轻松构建微前端应用程序。qiankun 提供了开箱即用的解决方案，使您无需从头开始编写微前端应用程序。

qiankun 的主要特性包括：

模块化开发： qiankun 使您能够将应用程序分解为多个独立模块，每个模块可以由不同的团队独立开发和维护。
路由管理： qiankun 提供了统一的路由管理机制，使您可以轻松地将不同的模块集成到一起，并定义它们之间的路由规则。
状态管理： qiankun 提供了状态管理机制，使您可以轻松地在不同的模块之间共享数据。
热更新： qiankun 支持热更新，使您可以随时更新应用程序的代码，而无需重新加载整个页面。

qiankun 入门步骤

接下来，我们将逐步介绍如何使用 qiankun 构建一个微前端应用程序。

安装 qiankun

npm install qiankun

创建 qiankun 应用

创建一个新的项目，并安装 qiankun。

mkdir my-qiankun-app
cd my-qiankun-app
npm init
npm install qiankun

创建主应用程序

在项目中创建一个 main.js 文件，作为主应用程序的入口文件。

import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'app1',
    entry: '//localhost:3001',
    container: '#app1',
    activeRule: '/app1',
  },
  {
    name: 'app2',
    entry: '//localhost:3002',
    container: '#app2',
    activeRule: '/app2',
  },
]);

start();

创建子应用程序

在项目中创建一个 app1 目录，作为第一个子应用程序的目录。

mkdir app1
cd app1
npm init
npm install react react-dom

在 app1 目录中创建一个 index.js 文件，作为子应用程序的入口文件。

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

function App() {
  return <h1>我是子应用程序 1</h1>;
}

ReactDOM.render(<App />, document.getElementById('app1'));

在 app1 目录中创建一个 package.json 文件，并添加以下内容：

{
  "name": "app1",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --config webpack.config.js",
    "build": "webpack --config webpack.config.js"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}