(编辑：jimmy 日期: 2024/11/8 浏览：2)
本文主要记录最近工作一个新项目从0-1的过程，主要记录3个节点，选型、运行时、上线。
react 脚手架初始化，社区比较火的有cra（create-react-app）和umi，从以下几点进行对比最终选择了比较贴合项目的umi。
最终考虑到一个项目需要快速搭建需要许多成型的插件支持所以采用了umi。antd真香！！！@umijs/plugin-model，推荐这个插件看懂内部实践基本就掌握了数据管理了。
umi提供app.ts,运行时配置文件，可以扩展运行时的能力,简单理解就是渲染你页面的前置操作都可以放在这里。这个概念可以类
比storybook(preview.js),如果要自己实现可以在对应html插入script。这里会涉及一些项目关联内容，因为项目需要内嵌在已有项目中，所以我们采取iframe的方式，不可避免我们需要通信，以及iframe大小自适应。
iframe通信，因为域不一样所以采取了，window.postmessage。为了维护数据可读性建议定义对应的事件传输内容，避免后期维护难度上升，如果需要频繁通信更建议采取微前端方案。
iframe自适应， iframe-resizer插件帮我们解决，记住嵌入与被嵌入的都需要安装，不然无法通信不可能自适应。这里遇到一个问题页面嵌入的时候body节点一直无法由内部撑大所以需要使用iframe-resizer提供的自定义计算方法自己在子页面提供对应方法。代码如下：
子系统
import 'iframe-resizer/js/iframeResizer.contentWindow.js';
// 如果内嵌则运行时打开监听
const iframeInit = () => {
if (parent !== window) {
(window as any).iFrameResizer = {
heightCalculationMethod: () => {
return document.body.children[0].clientHeight;
},
};
window.onmessage = (event: any) => {
if (Array.isArray(event.data)) {
if (event.data[0] === '事件名') {
console.log(event.data[1]) // 事件参数
}
}
};
parent.postMessage({ msg: 'MessageFromIframePage' }, '*');
}
};
iframeInit();
经过一轮打包，终于到了上线了。这里主要讲讲nginx怎么配置转发请求。
在开发期间，如果需要对多个不同域的接口时，前端第一个反应就是配置proxy。上线时就有点懵了。
proxy: {
'/api': {
target: 'http://aaa.com',
changeOrigin: true,
pathRewrite: { '^/api': '' },
},
'/b-api': {
target: 'http://bbb.com/',
changeOrigin: true,
pathRewrite: { '^/b-api': '' },
},
},
nginx配置如下
server {
listen 80;
server_name 访问地址;
set $rooturi "xxxx/dist";
location ~ .*\.(jpg|jpeg|gif|png|webp|ico|css|zip|tgz|gz|rar|bz2|pdf|txt|tar|wav|bmp|rtf|js|flv|swf|svg|proto)$ {
expires 365d;
root $rooturi;
}
location ^~/api/ {
rewrite ^/api/(.*)$ /$1 break;
proxy_pass http://aaa.com;
}
location ^~/b-api/ {
rewrite ^/b-api/(.*)$ /$1 break;
proxy_pass http://bbb.com;
}
location / {
root $rooturi;
try_files $uri $uri/ /index.html =404;
add_header Cache-Control "no-cache";
add_header Access-Control-Allow-Origin *;
}
}