一个写着玩的微前端框架

🏠 GitHub Homepage

👊 功能

• Html-loader
• Dynamaic-css
• Js-sandbox
• Lifecycle
• Parent-Child Communication
• Prefetch

📥 安装

git clone https://github.com/chuifengji/microcosmos.git

🛠 使用

引入

npm i microcosmos

import { start, register,initCosmosStore } from 'microcosmos';

注册子应用

register([
    {
        name: 'sub-react',
        entry: "http://localhost:3001",
        container: "sub-react",
        matchRouter: "/sub-react"
    },
    {
        name: 'sub-vue',
        entry: "http://localhost:3002",
        container: "sub-vue",
        matchRouter: "/sub-vue"
    }
])

开始

start()

主应用路由方式

function App() {
  function goto(title, href) {
    window.history.pushState(href, title, href);
  }
  return (
    <div>
      <nav>
        <ol>
          <li onClick={(e) => goto('sub-vue', '/sub-vue')}><a>子应用一</a></li>
          <li onClick={(e) => goto('sub-react', '/sub-react')}><a >子应用二</a></li>
        </ol>
      </nav>
      <div id="sub-vue"></div>
      <div id="sub-react"></div>
    </div>
  )
}

子应用必须导出钩子函数

bootstrap、mount、unmount

export async function bootstrap() {
    console.log('react bootstrap')
}

export async function mount() {
    console.log('react mount')
    ReactDOM.render(<App />, document.getElementById('app-react'))
}

export async function unmount() {
    console.log('react unmout')
    let root = document.getElementById('sub-react');
    root.innerHTML = ''
}

全局状态通信/存储

应用之间通信的场景其实较少，所以全局Store设计的也很简单。

在主应用中：

• initCosmosStore:初始化 store
• subscribeStore:监听 store 变化
• changeStore：给 store 派发新值
• getStore：获取 store 当前快照

let store = initCosmosStore({ name: 'chuifengji' })

store.subscribeStore((newValue, oldValue) => {
    console.log(newValue, oldValue);
})

store.changeStore({ name: 'wzx' })

store.getStore();

在子应用中：

export async function mount(rootStore) {
    rootStore.subscribeStore((newValue, oldValue) => {
        console.log(newValue, oldValue);
    })
   rootStore.changeStore({ name: 'xjp' }).then(res => console.log(res))
    rootStore.getStore();
    instance = new Vue({
        // router,
        store,
        render: h => h(App)
    }).$mount('#app-vue')
}

📌 Demo 事例

👥 作者

👤 Ethan.Lv

• Website: https://www.ethanlv.cn
• Github: @chuifengji

🤝 贡献

任何贡献、issues、pr 以及功能提议都是受欢迎的！快去 issues 页面 看看！

🎉 支持

如果帮到各位爷了就给个 ⭐️ 罢！——正如作者所说：

呜唔，谢谢 star 欢迎 pr

📝 协议

版权所有 © 2020 Ethan.Lv.这个项目是 MIT 协议。