使用tailor 輕鬆方便的整合web 框架react&&vue.md
阿新 • • 發佈：2018-12-11
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 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