mopocket

🕶 Mopocket

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

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

🤔 动机

❓ 微前端解决了哪些问题

微前端主要还是解决前端技术栈隔离而非业务隔离，区别后端微服务的概念。主要解决的是业务迭代的同时能无负担的切换到新技术栈进行开发，可以在前端技术发展的某个时间点利用新技术无痛的在原有基础上进行迭代开发，能有效隔离之前不同版本不同框架的业务代码，同时又做到优秀的用户体验能在单页中切换无闪屏优于 iframe 的刷新方案，对于一个长期维护的项目十分有价值可以获得很大的收益。

❓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 –registry=https://registry.in.myspacex.cn/ # or npm install -g mopocket

🔧 CLI 快速指引

# 初始化一个应用
$ 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
├── lerna.json
├── mopocket.config.js
└── package.json

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

• micro-apps 存放子应用的目录
• micro-components 存放微组件的目录
• src 存放主应用代码 index.ts 为入口文件
• lerna.json lerna 配置文件
• 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: 项目目录名为默认配置
devHost: 127.0.0.1
devPort: 随机端口号

配置合并策略

子应用会默认合并主应用的 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: (webpack) => {
    webpack.plugin('clean').use(CleanPlugin, [['dist'], { root: '/dir' }]);
  },
};

🕹 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;
    }

}

🙋‍♂️ 常见问题

待补充