Skip to main content

icestark 2.4.0

Announcing icestark 2.4.0#

icestark 2.4.0 发布的主要特性有:

解决 Script Error 错误#

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

script error

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

为解决跨域捕获 JavaScript 异常,需要为 <script > 添加 crossorigin="anonymous" 属性。

<script src="http://another-domain.com/app.js" crossorigin="anonymous"></script>

在最新的 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"] : [],
}

有关 scriptAttributes 使用的更多内容,可参考 api - scriptAttributes

此外,还可以通过 scriptAttributes 来为某个 JavaScript 文件做特殊的标记。比如:

...
// 为微应用的 chunk 资源标记类型
scriptAttributes: (url) => url.includes('chunk') ? ["resourceType=chunk"] : [],
...

还需要注意的是,以下属性在 scriptAttributes 中不可设置:

  • async
  • id
  • type
  • src
  • async
  • icestark

在开发阶段,icestark 会进行 error 提示,比如试图通过 scriptAttributes 字段修改 JavaScript 文件的 src

@ice/stark-data 支持 Symbol key#

@ice/stark-data 是 icestark 提供的应用间通信解决方案。现在,已支持 Symbol 作为标识 key。

如果您对 Symbol 还不熟悉,可以先在这里了解下。

使用方式如下:

(1)在主应用中监听事件

import { event } from '@ice/stark-data';
const sym = Symbol.for('freshMessage');
event.on('sym', () => {
// 重新获取消息数
})

(2)在微应用触发事件

import { event } from '@ice/stark-data';
const sym = Symbol.for('freshMessage');
event.emit('sym');

千万不要使用 new Symbol()Symbol() 来生成 symbol,因为:

Symbol('foo') !== Symbol('foo')
// true

独立官网#

icestark 于前两周上线独立官网。我们重新梳理了所有文档,并扩展了很多内容。

  1. icejs、umi、create-react-app、nuxt.js、next.js、Angular 等其他多种框架的用户提供了接入 icestark 指导,请参阅 其他框架接入微应用

  2. 为所有 api 标记了支持的版本;

  1. 以及更明显的 FAQ 入口

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

icestark 2.x 版本中,支持框架应用通过 props 传递微应用自定义参数。如:

// 框架应用
const appConfig = {
...
icestark: {
type: 'framework',
Layout: BasicLayout,
getApps: async () => {
const apps = [{
path: '/seller',
title: '商家平台',
url: [
'//ice.alicdn.com/icestark/child-seller-react/index.js',
'//ice.alicdn.com/icestark/child-seller-react/index.css',
],
+ props: {
+ name: 'micro-child'
+ }
}];
return apps;
},
...
},
};
runApp(appConfig);

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

const Detail = ({ props }) => {
const { frameworkProps: { name } } = props;
return <div>{name}</div>;
}
export default Detail;

注意,您需要使用下面的指令将 build-plugin-icestark 升级到最新版本:

$npm i build-plugin-icestark@latest -D

对于还在使用 icestark 1.x 的用户,请查阅升级指南

增强的沙箱能力#

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

function foo (obj) {
eval.bind(window)('console.log(obj)');
}
boo({a: 1});
// Uncaught ReferenceError: obj is not defined

在最新的版本中,您可以在代码中正常使用 eval 函数,并得到它的预期行为。

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

// 在沙箱中执行
window.a = false;
console.log(a);
// undefined

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

后续的版本计划#

我们会持续扩展 icestark 的能力,提升微前端体验。在接下来的版本中,我们会:

  • 优化 icestark 本地开发以及沙箱的调试体验 (issue);
  • React ComponentApi 的使用方式对齐所有字段。这可能会导致某些字段在未来的版本中处于 @deprecated 阶段 (rfc);
  • 会修复使用 Prompt 组件二次弹框的问题;(issue);
  • 提供更简单、方便样式隔离方案。