写点什么

在微前端中,antd icon createFormIconfontCN 的本地化问题

用户头像
blueju
关注
发布于: 2021 年 04 月 06 日

首发于 语雀文档


<a name="tCbT2"></a>

前言

用过 antd icon 的朋友们可能知道,对于 createFormIconfontCN,其中介绍的用法是:


https://ant.design/components/icon-cn/#components-icon-demo-iconfont


使用的是外链的方式


import { createFromIconfontCN } from '@ant-design/icons';
const IconFont = createFromIconfontCN({ scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js',});
ReactDOM.render( <div className="icons-list"> <IconFont type="icon-tuichu" /> <IconFont type="icon-facebook" /> <IconFont type="icon-twitter" /> </div>, mountNode,);
复制代码


<a name="XXLpa"></a>

对于内网开发者

对于内网开发者,无法连接外网,因此也就无法使用外链。<br />而如果我们使用 public 静态化的方式,能较好地解决图标资源本地化的问题。<br />我一开始也是使用此方法。


第一步:将需要的字体脚本放入 public 目录下第二步:在 createFromIconfontCN 的 scriptUrl 中写入字体脚本的相对路径字符串


import { createFromIconfontCN } from '@ant-design/icons';
const IconFont = createFromIconfontCN({ scriptUrl: './font_8d5l8fzk5b87iudi.js',});
ReactDOM.render( <div className="icons-list"> <IconFont type="icon-tuichu" /> <IconFont type="icon-facebook" /> <IconFont type="icon-twitter" /> </div>, mountNode,);
复制代码


<a name="EjpKQ"></a>

对于微前端应用开发者

但对于微前端应用开发者(比如说我们), public 静态化的方式,仍无法满足我们解决图标资源本地化的问题。因为子应用一旦嵌入基座,由于浏览器中的 IP 域名就不再是子应用的 IP 域名,若请求未明确指定 IP 域名的情况下,请求会默认取浏览器中的 IP 域名(虽然大多是 umi+qiankun,会帮我处理绝大多数请求,让请求仍指向子应用的静态资源服务),如图:<br />



font 的正确路径应该是:http://子应用 IP:子应用端口/font.js,但由于子应用在基座(即:主应用)中运行,此时使用的是相对路径,可以发现发出的资源请求 URL 变成了:http://主应用 IP:主应用端口/font.js,这明显不对,报了 404 错误。


<a name="Z5DPK"></a>

我的解决方案

说实话,这并不难理解,只是当时一下子没想到,害我自己还去写了根据应用名获取对应应用地址,将其与图标资源文件进行路径拼接的逻辑方法。😂😂😂


我在网上搜了不少,只找到官方的外链方式,和 public 静态化的方式来解决图标资源本地化,但没看到有如下的解决方式。<br />在我看来,在没有更多时间去研究 umi 配置的情况下去解决图标资源本地化,这是最快的解决方案。


iconfont 的字体脚本本质还是 js 脚本,那便可以直接 require


const IconFont = Icon.createFromIconfontCN({  scriptUrl: require('../assets/js/font_8d5l8fzk.js'),});
复制代码


<br />当然,还有一种办法,那就是:内网 / 外网的 CDN / OSS

发布于: 2021 年 04 月 06 日阅读数: 9
用户头像

blueju

关注

还未添加个人签名 2019.04.05 加入

还未添加个人简介

评论

发布
暂无评论
在微前端中,antd icon createFormIconfontCN 的本地化问题