mopocket

🕶 Mopocket

beta 乞丐版中，部分功能尚未完全实现或存在 bug ～

📦 开箱即用的微前端解决方案，集成乾坤并采用约定大于配置的方式简化使用流程。

❓Mopocket 解决的问题

💡 简化乾坤繁琐的配置

// 乾坤

import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'react app', // app name registered
    entry: '//localhost:7100',
    container: '#yourContainer',
    activeRule: '/yourActiveRule',
  },
  {
    name: 'vue app',
    entry: '//localhost:7100',
    container: '#yourContainer2',
    activeRule: '/yourActiveRule2',
  },
]);

start();

// Mopocket

import { startMicroApps } from 'mopocket';

startMicroApps();

以上对比可以很明显的看出区别，Mopocket 会根据目录结构以及子项目下的配置文件(mopocket.config.js)自动注册，使用中不需要考虑开发环境 Server 启动的 host 还有 port，也无需考虑开发环境和生产环境的 entry 不一致，activeRule 也会根据规则自动生成。当然特殊情况可以通过应用中的 mopocket.config.js 单独配置。

同时 Mopocket 集成一套开发环境、构建工具、包管理方案等，不需要写太多的 webpack 构建配置，全部默认集成。

👋 快速上手

💿 安装

# 目前仅上传到私有npm源
$ yarn global add mopocket

🔧 CLI 快速指引

# !项目依赖yarn workspace 请使用yarn

# 初始化一个应用
$ mpt init myproject

# 安装依赖
$ cd myproject && yarn

# 启动开发环境devServer，如果在项目根目录下执行将会启动所有微应用
$ mpt dev

# 单独启动一个微应用
$ yarn workspace <微应用文件夹名> run dev

# 打包生成环境，如果在项目根目录下执行将会打包所有微应用
$ mpt build

# 单独打包微应用
$ yarn workspace <微应用文件夹名> run build

# 根据模板创建子应用
$ mpt create react-antd

🎯 使用

🦉 约定的最小文件结构

mopocket-project
├── micro-apps
├── micro-components
├── src
├── mopocket.config.js
└── package.json

如上，由框架约定的目录：

• micro-apps 存放子应用的目录
• micro-components 存放微组件的目录
• src 存放基座代码 index.ts 为入口文件
• mopocket.config.js 主应用的 mopocket 配置文件
• package.json

🦉 基本使用

入口启动

// src -> index.ts
import { startMicroApps } from 'mopocket';

startMicroApps();

startMicroApps()将会生成约定好的 qiankun [registerMicroApps](https://qiankun.umijs.org/zh/api#registermicroappsapps-lifecycles) API 所需的注册参数并启动，免去手动指定。

生成 qiankun register 的配置规则如下：

[
  {
    name: 'demo1', // app name registered
    entry: '//localhost:7100', // 生产环境下生成的是静态资源目录入口 例如: /demo1/
    container: '#root',
    activeRule: '/app-demo1',
  },
  {
    name: 'demo2',
    entry: '//localhost:7101',
    container: '#root',
    activeRule: '/app-demo2',
  },
];

设置子应用路由 history 的 basename

子应用如果需要用到路由框架请设置mopocket提供的 basename，此属性将会根据环境自动适配，你只需要在你的路由框架上配置它

// react
import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import { basename } from 'mopocket';
import HelloWorld from './views/hello-world';
import HelloWorld2 from './views/hello-world2';

const App = () => {
  return (
    <BrowserRouter basename={basename}>
      <Switch>
        <Route path={'/hello2'}>
          <HelloWorld2 />
        </Route>
        <Route path={'/'}>
          <HelloWorld />
        </Route>
      </Switch>
    </BrowserRouter>
  );
};

export default App;

🦉 mopocket.config.js 配置文件

配置项

export declare var MPT_CONFIG: {
  name: string;
  devHost?: string;
  devPort?: string;
  devProxy?: Record<any, any>;
  webpackChain?: (webpack: any) => void;
  container?: string;
  basename?: string;
  [propName: string]: any;
};

默认配置

每个应用都会存在一些默认配置，就算你不指定它们，如果指定它们将被覆盖。

name: 项目目录名为默认配置
devServer: {
	host: 127.0.0.1,
	port: 随机端口号
}

配置合并策略

子应用会默认合并主应用的 config 文件，也就是项目根目录下的mopocket.config.js，当子应用存在自己的mopocket.conifg.js文件时，子应用下的配置会覆盖主应用的。注意！有些配置如果不指定，会默认生成。 例如 devHost / devPort，就算不配置他们也存在，不会被主应用的配置覆盖引起冲突。

在应用中获取配置项

// mopocket 模块导出了config，你可以在应用中很方便的获取到配置项
import { config } from 'mopocket';

修改应用的 webpack 配置

mopocket.config.js 下的 webpackChain 可以修改 webpack 配置链

依赖于 webpack-chain ，传回的 config chain 对象 api 请参考该项目文档

module.exports = {
  webpackChain: (config) => {
    config.plugin('clean').use(CleanPlugin, [['dist'], { root: '/dir' }]);
  },
};

🦉 提供的 path alias

'@' // 对应当前微应用src目录
'@master' // 对应基座src目录
'@micro-apps' // 对应micro-apps目录
'@micro-components' // 对应micro-components目录

🦉 自定义构建

mopocket 内置了 webpack4，如需要自定义构建工具可按如下方法

$ mpt dev --exec 'yarn serve'
$ mpt build --exec 'vue-cli-service build'

注意！为了保证注册的微应用配置一致，当在 dev 环境下启动 devServer 需要保持 host 和 port 一致。你可以通过内置提供的 process.env.MPT_CONFIG 拿到配置并设置你的构建规则和 mopocket 保持一致。或者你可以在 mopocket.config.js 中手动指定它们。 ​

如下为 vue-cli 集成的示例：

// vue.config.js
const deserialize = require('mopocket/lib/deserialize');
const mptConfig = deserialize(process.env.MPT_CONFIG);
const { resolve } = require('mopocket/lib/local-path');

module.exports = {
  devServer: {
    // 请将devServer的port还有host和mopocket自动生成的配置保持一致
    host: mptConfig.devServer.host,
    port: mptConfig.devServer.port,
    // 此项必须，不然基座将无法跨越加载微应用
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
  },
  chainWebpack: (webpackConfig) => {
    // 此项必须，配置此项qiankun才能正确识别微应用入口
    webpackConfig.output
      .library(`${mptConfig.name}-[name]`)
      .libraryTarget('umd')
      .jsonpFunction(`webpackJsonp_${mptConfig.name}`);

    // 此项必须，在运行环境给mopocket添加所依赖的参数
    webpackConfig.plugin('define').tap((args) => {
      return [
        {
          ...args[0],
          __MPT_CONFIG__: process.env.MPT_CONFIG,
          __MPT_REG_APPS__: process.env.MPT_REG_APPS,
          __MPT_REG_COMPS__: process.env.MPT_REG_COMPS,
        },
      ];
    });

    // 可配置resolve alias path 方便开发
    webpackConfig.resolve.alias
      .set('@', resolve('./src'))
      .set('@master', resolve('../../src'))
      .set('@micro-components', resolve('../../micro-components'))
      .set('@micro-apps', resolve('../../micro-apps'));
  },
};

🕹 API

startMicroApps(lifeCycles?)

启动微应用

• lifeCycles - 可选，全局的微应用生命周期钩子，与 qiankun 一致

loadMicroComponent(options)

加载微组件

• options - 必选，加载的微组件的参数

export declare interface MicroComponentOptions {
  name: string;
  container: string;
  props?: Record<any, any>;
}

config

应用的配置

basename

history basename

regApps

生成的注册微应用配置

regComponents

生成的注册微组件配置

💾 如何部署

执行yarn build后生成的dist/

├── demo1
│   ├── index.html
│   └── static
├── demo2
│   ├── index.html
│   └── static
├── index.html
└── static

如上目录所示子应用打包后会包含在主应用目录内形成层级关系。

只需要在 nginx 配置中加上 try_files $uri $uri/ /index.html; 开启 history 模式。

server {
    listen       80;
    server_name  localhost;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

}

🙋‍♂️ 常见问题

待补充