微应用 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 registered
    entry: '//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
    }
  },

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