手摸手教你用qiankun开发微前端项目（二）

  承接上一篇，下面我们来介绍如何配置react子系统。
2.react子系统：

  首先我们通过create-react-app来初始化一个react项目，如果没有安装过create-react-app，需要通过下面命令来安装：

npm install -g create-react-app

  初始化项目：

npx create-react-app reactapp

  我们可以先把项目提到已经新建好的远程仓库中，因为create-react-app创建的项目里面已经初始化了README和.gitignore，所以创建仓库的时候不要勾选创建README和gitignore：

git add .
git commit -m "push new files"
git remote add origin 远程仓库地址
git push -u origin master

  就这样我们把脚手架新建的项目推到了远程仓库中，下面我们来修改子系统中的一些文件，可以参考qiankun官网：

  1.在src目录新增public-path.js，用于修改运行时的 publicPath。（注意：运行时的 publicPath 和构建时的 publicPath 是不同的）:

// src/public-path.js

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

  2.下面需要为子系统添加一个入口文件index.js，在index.js文件中，需要先引入public-path文件，然后定义render方法，在导出的mount钩子中调用，用于基座来渲染子系统。在render方法中，为了避免根 id #root 与其他的DOM冲突，需要限制查找范围为props参数中的container。并且通过if判断确保了单独访问子系统时的渲染操作。后续分别定义了bootstrap()、mount()、unmount()三个函数为qiankun框架要求在子系统入口文件中导出的钩子函数：

// src/index.js

import './public-path';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

function render(props) {
  const { container } = props;
  ReactDOM.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>,
     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'));
}

  3.修改webpack配置，安装插件 @rescripts/cli，来允许webpack-server在调试环境中跨域：

npm i -D @rescripts/cli

  根目录新增 .rescriptsrc.js:

// .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": "react-scripts start",
+   "start": "rescripts start",
-   "build": "react-scripts build",
+   "build": "rescripts build",
-   "test": "react-scripts test",
+   "test": "rescripts test",
-   "eject": "react-scripts eject"

  4.最后，为了配合基座系统的配置，react子系统需要在3000端口来启动服务，在react项目中添加.env文件：

PORT=3000

  这样就可以启动react子系统了，同时启动上一篇介绍的主系统，访问主系统的地址，就可以默认就可以在子版块中看到react子系统的页面了。

  下一篇，我们来介绍对于vue子系统的文件修改。

更多精彩文章敬请关注：