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 构建配置，全部默认集成，可以算做一个轻量级微前端解决方案的 umijs。

👋 快速上手

💿 安装

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

🔧 CLI 快速指引

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

# 安装依赖
$ cd myproject && yarn bootstrap # 或 yarn && yarn lerna bootstrap

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

# 单独启动一个微应用
$ mpt lerna run dev --scope=<微应用文件夹名> # 或 cd myproject && mpt dev

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

# 单独打包微应用
$ mpt lerna run build --scope=<微应用文件夹名> # 或 cd myproject && mpt build

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