https://github.com/oyuyue/grafeo
简单、方便、功能强大的微前端解决方案。
https://github.com/oyuyue/grafeo
mfe microfrontend
Last synced: 8 months ago
JSON representation
简单、方便、功能强大的微前端解决方案。
- Host: GitHub
- URL: https://github.com/oyuyue/grafeo
- Owner: oyuyue
- License: mit
- Created: 2020-12-11T10:49:48.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2021-01-08T10:28:28.000Z (over 5 years ago)
- Last Synced: 2024-05-08T05:41:09.772Z (about 2 years ago)
- Topics: mfe, microfrontend
- Language: JavaScript
- Homepage:
- Size: 1.13 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# (WIP) Grafeo
简单、功能强大的微前端解决方案。
## 快速入门
```
yarn add -D @grafeo/webpack-plugin
```
该插件将微前端项目打包成 @grafeo/loader 可以加载的模块。
```js
const GrafeoPlugin = require('@grafeo/webpack-plugin')
module.exports = {
devServer: GrafeoPlugin.devServerConfig(8090),
configureWebpack: {
plugins: [
new GrafeoPlugin({
name: '@vue2/shell',
shared: { // 共享依赖，其他项目可以共享这些模块，无需重复下载
vue: 'https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.runtime.js',
vuex: 'https://cdn.jsdelivr.net/npm/vuex@3.6.0/dist/vuex.js',
'vue-router': 'https://cdn.jsdelivr.net/npm/vue-router@3.4.9/dist/vue-router.js',
'@vue2/module1': 'http://localhost:8091/remoteEntry.js',
'@vue2/utils1': 'http://localhost:8092/remoteEntry.js'
},
// filename: 'remoteEntry.js' // 最终的入口文件名，默认叫 remoteEntry.js
})
]
}
}
```
其中输出的 `remoteEntry.js` 文件为入口文件，体积很小，**不应该缓存这个文件**，否则可能不能加载正确的项目文件。
项目入口文件中一般都为如下内容
```js
__webpack_public_path__ ='http://localhost:8090/' // 设置 public path
import('./boot') // 动态加载主代码
```
在 HTML 文件中需要加载 loader 代码。
```html
```
最后在项目中动态加载其他微前端项目。
```js
// 第二个参数是获取，项目中导出的字段名，如果为 true 将会导出 default 字段
System.import('@vue2/module1', true).then((m) => {
m('#module1') // m 为其他项目
})
```
## 例子
详细例子请看 [examples](https://github.com/woopen/grafeo/tree/main/examples) 文件夹