0.2.6 • Published 4 years ago
microcosmos v0.2.6
一个写着玩的微前端框架
🏠 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