脚本宝典收集整理的这篇文章主要介绍了react项目从新建到部署的实现示例,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
本文主要记录最近工作一个新项目从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 *; } }
到此这篇关于react项目从新建到部署的实现示例的文章就介绍到这了,更多相关react 新建到部署内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典!
以上是脚本宝典为你收集整理的react项目从新建到部署的实现示例全部内容,希望文章能够帮你解决react项目从新建到部署的实现示例所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。