使用tailor 轻松方便的集成web 框架react&&vue
tailor 是一款很方便的layout 服务，类似facebook 的bigpipe，我们可以使用此工具
方便的集成各类web 框架，实现micro-fronteds 开发
参考demo
https://github.com/rongfengliang/tail-react-vue
说明
代码很简单，是从github 上集成合并的
https://github.com/tsnolan23/tailor-react-spa && https://github.com/shershen08/tailor-vue-demo
目的很简单，就是一个简单的集成测试
运行说明
- 初始化依赖
因为使用了lerna
yarn && yarn install-fragment-dependencies
- 启动依赖服务
yarn start-fragments
- 启动tailor 服务
yarn start
修改说明
主要是templates 的index.html
<!doctype html>
<html>
<head>
<title>Tailor Example Application</title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
<style>
body {
background: #ECEFF4;
}
</style>
<script>
(function(d) {
require(d);
var arr = [ 'react', 'react-dom', 'prop-types', 'classnames', 'proppy', 'proppy-react'];
while (i = arr.pop())(function(dep) {
define(dep, d, function(b) {
return b[dep];
})
})(i);
}(['http://localhost:6006/public/bundle.js']));
</script>
</head>
<body>
<div id="header"></div>
<div id="dashboard"></div>
<div id="contacts"></div>
<div id="chat"></div>
+ <fragment src="http://localhost:8090"></fragment>
<fragment src="http://localhost:8081"></fragment>
<fragment src="http://localhost:5000"></fragment>
<fragment src="http://localhost:3000"></fragment>
</body>
</html>
测试效果
- UI 效果
- 资源加载
说明
tailor 的fragment 开发模型，可以加速我们micro-frontends 的开发，功能还是很强大的,v4 版本也即将发布了，新的功能还是很期待的
参考资料
https://github.com/zalando/tailor
https://github.com/tsnolan23/tailor-react-spa
https://github.com/shershen08/tailor-vue-demo
https://github.com/rongfengliang/tail-react-vue
