# es-modules-micro

**Repository Path**: zhangbosss/es-modules-micro

## Basic Information

- **Project Name**: es-modules-micro
- **Description**: 自用纯手工的微前端框架
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 1
- **Created**: 2022-04-28
- **Last Updated**: 2025-02-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

前端发展到现在2022年，浏览器对新规范的兼容性也逐渐提高，基于规范es的esbuild越来越流行，基于其开发工具vite无论性能还是易用性已经完全替代webpack等一种打包工具，而前端的模块化cmd、umd等在es在浏览器淘汰旧设备以后将慢慢退出历史舞台，esbuild-micro 不同于乾坤，single-spa等微前端方案基于（system-js）。 

esbuild-micro和我们平时用的包一样，正常使用就能实现微前端。

注意：目前仅支持vite子项目，

 
1、主应用

引入初始化：

```plain
import { start } from 'esbuild-micro/src/index';

start(false); //关闭开启微应用日志



```
动态载入：
```plain

import { loadMicro } from 'esbuild-micro/src/index';
import { APP } from 'esbuild-micro/src/types';

const app = await loadMicro({
        name: props.qkName,
        baseUrl: props.qkUrl,
        domId: '#' + container
      });
      



```


其中 app 具有bootstrap mount unmount distory 等生命周期函数调用，loadMicro 后会默认执行bootstrap mount 。


2、子应用

子应用识别微应用标识

window.__POWERED_BY_MICO__

```plain
import { microClientBind } from 'esbuild-micro/src/index';

const console = new ConsoleLogger('微应用');
let _app: APPTYPE<Element> | undefined = undefined;
function render(props: MicroProps) {
  const { container } = props;
  const app = createApp(App);
  const cn = container ? container.querySelector('#microApp')! : '#microApp';
  console.log('子应用绑定规则', { container: cn });
  app.use(router).mount(container ? container.querySelector('#microApp')! : '#microApp');
  _app = app;
}
const lifeCycle = {
  async mount(props: MicroProps) {
    console.log('子应用-mount', { props });
    if (props.globalState) {
      props.globalState.onGlobalStateChange((state: any, prev: any) => {
        // state: 变更后的状态; prev 变更前的状态
        console.log('mico-子应用', { state, prev });
      });
    } 
    render(props);
  },
  async bootstrap() {
    console.log('子应用-bootstrap');
  },
  async unmount(props: MicroProps) {
    const { container } = props;
    console.log('子应用-unmount', { props });
    if (_app) {
      _app.unmount();
    }
    // const { container } = props;
    // const param=document.getElementById('microApp')?.parentElement;
    // param?.removeChild(document.getElementById('microApp')!)
  }
};

try {
  if (window.__POWERED_BY_MICO__) {
    microClientBind('microAppAAA', lifeCycle);
  }

  if (!window.__POWERED_BY_MICO__) {
    render({});
  }
} catch (e) {}

export default microClientBind;

```
 main.ts绑定周期函数并导出microClientBind 就可。
结构文档
https://gitee.com/zhangbosss/study/blob/master/%E5%BE%AE%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB.pdf