Loading...
墨滴

JackWang

2021/07/02  阅读:42  主题:山吹

icestark 独立官网上线(及 Announcing 2.4.0)

icestark[1] 自 2019.05.09 第一次代码提交,至今已过三年。在这三年醇之际,icestark 以更崭新的面貌出现在大家眼前。千呼万唤始出来,icestark 正式上线独立官网。

https://img.alicdn.com/imgextra/i2/O1CN01n2tuv81VPSHeytVRB_!!6000000002645-1-tps-500-226.gif
https://img.alicdn.com/imgextra/i2/O1CN01n2tuv81VPSHeytVRB_!!6000000002645-1-tps-500-226.gif

官网链接请戳这里:

https://micro-frontends.ice.work/

icestark 是什么?

三年来,我们的初心未变:面向大型系统,提供领先的微前端解决方案。即:

  • 从空间上,解决团队协作带来的效率问题;
  • 从时间上,解决中长尾应用的升级迭代带来的效率问题。

icestark 在保证一个系统的用户体验和开发体验的基础上,如同后端微服务一样实现各个微应用的独立开发和部署,通过 icestark 运行时管理应用的注册和渲染,将巨石应用进行彻底地解耦。

如果你有兴趣了解有关 icestark 更多的内容,点一点上面的[官网](https://micro-frontends.ice.work/[2])。或者查阅我们的系列文章:

  • 面向大型工作台的微前端解决方案 icestark[3]
  • ICE 在微前端的探索[4]

Announcing 2.4.0

同时,我们也发布了 icestark 的 2.4.0[5] 版本。在这个版本中,我们:

  • 解决了可能遇到的 Script Error 错误

微应用上线运行遇到错误时,监控平台通常会捕获到 Script Error 的输出:

https://img.alicdn.com/imgextra/i4/O1CN01BiMLFq1YXeDQVV7Ri_!!6000000003069-0-tps-680-29.jpg
https://img.alicdn.com/imgextra/i4/O1CN01BiMLFq1YXeDQVV7Ri_!!6000000003069-0-tps-680-29.jpg

这是因为出于安全考虑,浏览器会刻意隐藏其他域的 JavaScript 文件抛出的具体错误信息,来避免敏感信息被不受控制的第三方脚本捕获。因此,浏览器只允许同域下的脚本捕获具体错误信息,而其他脚本只知道发生了一个错误,但无法获知错误的具体内容。

为解决跨域捕获 JavaScript 异常,需要为 <script > 添加 crossorigin="anonymous" 属性。在最新的 icestark 版本中,可以通过 scriptAttributes 为微应用的 JavaScript 文件添加这一属性。

// 微应用配置
{
  name'app1',
  activePath'/seller',
  url: [
    '//unpkg.com/app1/js/chunk.js',
    '//unpkg.com/app1/js/index.js',
    '//unpkg.com/app1/css/index.css',
  ],
  ...
  // 为微应用 app1 的所有 js 资源添加 crossorigin="anonymous"
  scriptAttributes: ["crossorigin=anonymous"],
  // or
  // 为 `//unpkg.com/app1/js/chunk.js` 资源添加 crossorigin="anonymous"
  scriptAttributes(url) => url.includes('chunk') ? ["crossorigin=anonymous"] : [],
}
  • 增强的沙箱能力

在最新的版本中,我们修复了 eval 函数在沙箱中执行的一些异常行为。该行为是 eval 函数错误被 bind 导致执行作用域为全局作用域。您可以通过下面的代码简单验证:

function foo (obj{
  eval.bind(window)('console.log(obj)');
}

boo({a1});
// Uncaught ReferenceError: obj is not defined

在之前的版本中,沙箱中的 *假值*[6] 不会被捕获。比如:

// 在沙箱中执行
window.a = false;

console.log(a);
// undefined

在最近的版本中,我们修正了这一行为。

  • 提供 ice 用户消费框架应用传递的 props

对于 ice 用户,我们提供了 build-plugin-icestark[7] 来快速接入 icestark。在最新的 build-plugin-icestark 版本中,可以通过 页面组件[8]props 获取到框架应用传递的自定义 props 参数。

const { frameworkProps: { name } } = props;
  return <div>{name}</div>;
}

export default Detail;

有关更多 icestark 2.4.0 的更新,可访问我们的博客专栏:

https://micro-frontends.ice.work/blog/00-icestark-2-4-0

后续计划

在后续的版本中,我们会持续优化 icestark 沙箱,提升微应用体验,以及提供更简单、更方便的样式隔离方案。在最近的 2.5.0 版本,我们将:

  • 优化 icestark 本地开发以及沙箱的调试体验 (issue[9]);
  • React Component[10]Api[11] 的使用方式对齐所有字段。这可能会导致某些字段在未来的版本中处于 @deprecated 阶段 (rfc[12])
  • 会修复使用 Prompt 组件二次弹框的问题 (issue[13]);

参考资料

[1]

icestark: https://github.com/ice-lab/icestark

[2]

官网: https://micro-frontends.ice.work/

[3]

面向大型工作台的微前端解决方案 icestark: https://zhuanlan.zhihu.com/p/88449415

[4]

ICE 在微前端的探索: https://zhuanlan.zhihu.com/p/94847293

[5]

2.4.0: https://micro-frontends.ice.work/blog/00-icestark-2-4-0

[6]

假值: https://developer.mozilla.org/en-US/docs/Glossary/Falsy

[7]

build-plugin-icestark: https://ice.work/docs/guide/advanced/icestark

[8]

页面组件: https://ice.work/docs/guide/basic/router#%E8%B7%AF%E7%94%B1%E7%BB%84%E4%BB%B6%E5%8F%82%E6%95%B0

[9]

issue: https://github.com/ice-lab/icestark/issues/259

[10]

React Component: https://micro-frontends.ice.work/docs/api/wrapper

[11]

Api: https://micro-frontends.ice.work/docs/api/core

[12]

rfc: https://github.com/ice-lab/icestark/issues/299

[13]

issue: https://github.com/ice-lab/icestark/issues/325

JackWang

2021/07/02  阅读:42  主题:山吹

作者介绍

JackWang

公众号:Hello FE @淘宝