Magix中的微前端实践

微前端

微前端主要是借鉴后端微服务的概念。简单地说，就是将一个巨无霸（Monolith）的前端工程拆分成一个一个的小工程。别小看这些小工程，它们也是“麻雀虽小，五脏俱全”，完全具备独立的开发、运行能力。整个系统就将由这些小工程协同合作，实现所有页面的展示与交互。

规则

一、充分使用浏览器原生方案

如果有dom操作，请直接使用浏览器原生的api，不要引用jQuery，也不要自己去写简版的jQuery lite之类的，没必要。
```
lastNode.classList.add('@game.css:succ');
```

加载器使用浏览器提供的import即可。

import Frontend from 'https://xinglie.github.io/frontend/build/fe.js';
let FE_ID = Magix.guid('_fe_');
Frontend.config(FE_ID, {
logo: 0,
hash: 0,
scrollId: FE_ID
});
Frontend.boot();

每个项目需要的第三方类库在自己项目中加载，项目与项目之间不共享这些模块。如果共享这些模块，就需要考虑如何共享，如何升级。从单一项目出发来讲，这样的方式并不利于开发和维护，越内聚越少与外界有关联越好。所以即使某些模块重复加载也未尝不可。

项目中，不再使用reset.css这样的样式文件，项目中的样式选择器一定要拒绝标签选择器。reset.css放在入口文件中统一提供

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <link type="image/x-icon" href="./icon.png" rel="shortcut icon">
    <title>Loading</title>
    <style>body,ul{padding:0;margin:0}ul{list-style-type:none}body{font:14px/1.5 'helvetica neue',arial,'hiragino sans gb',stheiti,'wenquanyi micro hei',sans-serif}@keyframes load{0%{width:0}100%{width:98%}}.outer{background:#e6e6e6;position:fixed;left:50%;top:50%;width:300px;margin:-20px 0 0 -150px;height:2px;}.inner{width:0%;background:#4d7fff;height:100%;animation:load 3s forwards;margin-bottom:-2px;}</style>
</head>
<body>
    <div id="fe"><div class="outer"><div class="inner"></div></div></div>
    <script type="module">import a from './src/fe.js';a.config('fe',{logo:1,hash:1});a.boot()</script>
</body>
</html>

实践

主项目文件

https://xinglie.github.io/

被加载的第三方

https://xinglie.github.io/frontend/

xinglie / xinglie.github.io

Magix中的微前端实践 #50

微前端

规则

实践

关于第3点