微应用 qiankun 项目搭建

保姆级搭建qiankun教程 ==> hello world级别搭建，不包含应用间通信之类的

本文经过本人按照qiankun文档==>项目实践书写，主要记录一下在搭建过程中遇到的问题

因为react-scripts 高于版本4所造成的npm i -D @rescripts/cli安装失败

解决办法

将react-scripts版本降到2～4之间

微应用中使用了eslint导致微应用报错问题

解决办法

在package.json文件中进行以下配置
"eslintConfig": {   ...,"globals": {"__webpack_public_path__": true}   },

第一步 ==> 搭建主应用

我是采用的React应用
1.新建React项目

npx create-react-app main_app

2.主应用添加qiankun依赖

$ yarn add qiankun # or npm i qiankun -S

3.主应用中注册微应用

import { registerMicroApps, start } from 'qiankun';registerMicroApps([{name: 'react app', // app name registeredentry: '//localhost:7100',container: '#yourContainer',activeRule: '/yourActiveRule',},{name: 'vue app',entry: { scripts: ['//localhost:7100/main.js'] },container: '#yourContainer2',activeRule: '/yourActiveRule2',},
]);start();

如果不知道该怎么下手可以像我这样写在App.js里面

import { BrowserRouter as Router, Link } from 'react-router-dom';
import { registerMicroApps, start } from 'qiankun';
import './App.css';function App() {let style = {width: '100vw',height: '100vh',}return (<div className="App"><h1>主应用启动成功</h1><Router><Link to='/app-react'><button>显示React微应用1</button></Link><Link to='/app-react2'><button>显示React微应用2</button></Link></Router><div id='container' style={style}></div></div>);
}registerMicroApps([{name: 'app_1',entry: '//localhost:3001',container: '#container',activeRule: '/app-react',},{name: 'app_2',entry: '//localhost:3002',container: '#container',activeRule: '/app-react2',},
])
start();export default App;

到这里主应用就构建好了

第二步 ==> 构建微应用

我依然是采用的React项目
1.新建React项目 ==> 不再赘述命令。。
2.在 src 目录新增 public-path.js：

if (window.__POWERED_BY_QIANKUN__) {__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

3.入口文件 index.js 修改，为了避免根 id #root 与其他的 DOM 冲突，需要限制查找范围

import './public-path';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';function render(props) {const { container } = props;ReactDOM.render(<App />, container ? container.querySelector('#root') : document.querySelector('#root'));
}if (!window.__POWERED_BY_QIANKUN__) {render({});
}export async function bootstrap() {console.log('[react16] react app bootstraped');
}export async function mount(props) {console.log('[react16] props from main framework', props);render(props);
}export async function unmount(props) {const { container } = props;ReactDOM.unmountComponentAtNode(container ? container.querySelector('#root') : document.querySelector('#root'));
}

4.修改 webpack 配置

安装插件 @rescripts/cli

npm i -D @rescripts/cli

这里载安装依赖的时候可能会报错react-scripts这个依赖版本过高导致安装失败，只需要把这个依赖降低到2-4之间就可以了。

根目录新增 .rescriptsrc.js：

const { name } = require('./package');module.exports = {webpack: (config) => {config.output.library = `${name}-[name]`;config.output.libraryTarget = 'umd';config.output.jsonpFunction = `webpackJsonp_${name}`;config.output.globalObject = 'window';return config;},devServer: (_) => {const config = _;config.headers = {'Access-Control-Allow-Origin': '*',};config.historyApiFallback = true;config.hot = false;config.watchContentBase = false;config.liveReload = false;return config;},
};

修改 package.json：

   "start": "rescripts start","build": "rescripts build","test": "rescripts test",

如果微应用中使用了eslint还需要进行以下配置

"eslintConfig": {...,"globals": {"__webpack_public_path__": true}},

到此就搭建完成了,使用的时候只需要配置相应的路由即可。

微应用 qiankun 项目搭建相关推荐

qiankun 传统项目配置_微前端 qiankun 项目实践
原标题:微前端 qiankun 项目实践作者:zxh1307 https://juejin.im/post/5ea55417e51d4546e347fda9 导语最近在做微前端的项目 , 过程中真 ...
微前端qiankun从搭建到部署的实践
最近负责的新项目用到了qiankun,写篇文章分享下实战中遇到的一些问题和思考. 示例代码: github.com/fengxianqi/-. 在线demo:qiankun.fengxianqi.co ...
py获取前端的参数_微前端 qiankun 项目实践
(给前端大全加星标,提升前端技能) 作者:zxh1307 https://juejin.im/post/5ea55417e51d4546e347fda9 导语最近在做微前端的项目 , 过程中真是踩了 ...
微前端vue项目实战 -- 乾坤qiankun框架（一）
背景: 公司研发的项目主要是 GIS地图为基础的管理系统,由主体项目(管理业务模块)+ GIS地图应用,由于 GIS地图应用模块会在多个地方使用,所以单独构建一个项目,分别在不同的业务场景中引用.交 ...
乾坤qiankun框架搭建项目
主应用 vue2项目搭建第一步.创建vue2的项目与正常创建无异,在这里不做过多描述: 第二部.将创建好的vue2项目作为主应用,在根目录先安装qiankung yarn add qiankun # ...
vue简易微前端项目搭建（一）：项目背景及简介
github传送门: 1.h5主项目 2.项目脚手架 3.子项目模板系列文章传送门: vue简易微前端项目搭建(一):项目背景及简介 vue简易微前端项目搭建(二):子项目模板及项目脚手架搭建 vu ...
vue简易微前端项目搭建（二）：子项目模板及项目脚手架搭建
github传送门: 1.h5主项目 2.项目脚手架 3.子项目模板系列文章传送门: vue简易微前端项目搭建(一):项目背景及简介 vue简易微前端项目搭建(二):子项目模板及项目脚手架搭建 vu ...
Spring Cloud Hoxton 版本微服务项目搭建 admin 监控客户端
Spring Cloud Hoxton 版本微服务项目搭建 admin 监控客户端前言在上一篇文章博主已经讲解了admin 管理中心服务项目如何创建,不会的话可以前往学习,传送门:Spring C ...
为你的项目搭建sentry并且通过企微推送
介绍 sentry是一个开源的监控系统,能支持服务端与客户端的监控,还有个强大的后台错误分析.报警平台. 本篇文章主要介绍搭建sentry.使用sentry.接入企业微信推送 - 更多学习案例尽在我 ...

微应用 qiankun 项目搭建

保姆级搭建qiankun教程 ==> hello world级别搭建，不包含应用间通信之类的

第一步 ==> 搭建主应用

第二步 ==> 构建微应用

微应用 qiankun 项目搭建相关推荐

最新文章

热门文章