Skip to main content

Recent posts

icestark 2.6.0

那吒

那吒

Announcing icestark 2.6.0#

非常高兴地告诉大家，在 2.6.0 这个版本中，我们支持了 ES modules 模块类型的微应用。也就是说，如果您使用 Vite 或者 icejs Vite 模式 开发的应用，可以使用 icestark 来构建您的微前端架构。

本次更新主要包括：

支持 ES modules 类型微应用#

ES modules 模块规范是面向未来的模块规范，诸如 Vite、snowpack 等原生支持 ES modules 的构建工具的产生，以及 现代浏览器 对 ES modules 语法的支持，相信未来会有越来越多的微应用构建在 native ES modules 之上。相比传统的构建工具（比如 webpack），这些新型的构建工具或多或少地带来了以下优势：

  • 由于无需打包的特性，服务器启动时间超快
  • 项目大小不再成为服务器启动速度的限制因素
  • HMR 始终保持快速更新

随着 icejs 支持 Vite 模式，icestark 也为大家带来了 ES modules 类型微应用的支持。

框架应用接入 ES modules 微应用的方式非常简单，配置 loadScriptMode: import 来支持 ES modules 类型微应用的加载。

<AppRouter>
<AppRoute
title="商家平台"
+ loadScriptMode="import"
url={[
'//unpkg.com/icestark-child-seller/build/js/index.js', // 资源 ES modules 入口
'//unpkg.com/icestark-child-seller/build/css/index.css',
]}
/>
<AppRoute
path="/user"
//...
/>
</AppRouter>

对于 Vite 应用的 icestark 适配，可参考 其他框架接入微应用 - Vite 应用 进行配置。后期，我们将提供 Vite plugin 能力，使 Vite 应用的接入非常简单。

对于 ice.js 子应用，只需将 build-plugin-icestark 升级到最新版本，并开启 icejs Vite 模式，即可完成改造工作。

ES modules 微应用的常见问题解答#

框架应用需要是 Vite 应用吗？#

不需要。框架应用可以使用 webpack 等非 ES modules 构建工具，无需对框架应用进行任何构建上的改造。对于框架应用，唯一需要做的是：升级最新的 icestark 版本，并设置 ES modules 微应用的加载方式（loadScriptMode 字段） 设置为 import 即可。

支持沙箱模式吗？#

暂不支持沙箱模式。

为什么要使用 ES modules 微应用#

除了本地开发的优秀体验，由于 ES modules 脚本只执行一次的策略，微应用二次加载的速度基本没有延迟，极高地提升二次加载体验。

浏览器的版本支持#

由于 icestark 内部使用 dynamic import 来支持 ES modules 应用，因此支持 chrome 63 版本以上的浏览器。

tip

有关使用 ES modules 的其他疑问，欢迎通过 issue 或 discussion 告知我们。

完善 Angular 微应用#

Angular 1.x 应用我们建议通过 entry 方式接入，因为我们没有比较好的方式来定义 生命周期函数。在 Angular 5.x 及以上的版本，我们可以通过 bootstrapModule 获取到 NgModule 实例。因此可以通过下面的方式定义生命周期函数：

import { NgModuleRef } from '@angular/core';
let app: void | NgModuleRef<AppModule>;
if (!isInIcestark()) {
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
}
export async function mount () {
app = await platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
}
export function unmount () {
// @ts-ignore
app.destroy();
}

同时，为了适配 Angular 应用，icestark 做了如下改动：

  • 兼容 Angular 的 <base /> 元素 - icestark 现在会默认解析 entry 或 entryContent 中的 <base> 元素的 href，并将其作为该微应用最终的 publicPath 的一个基准因子。解析完成后，该 <base > 元素不会出现在 DOM 结构中（否则可能修改其他应用的资源地址）。

修复对 location.hash 赋值 onRouteChange 触发两次的错误#

由于对 window.location.hash 进行赋值，会触发 popstate 和 hashchange 两个事件，导致钩子函数 onRouteChange 触发两次。版本 2.6.0 修复了这个问题。

对项目配置的改造#

由于 icestark 内部使用 dynamic import 来支持 ES modules 应用，因此需要对 icestark 工程进行一些适配，保证 dynamic import 不会被转译。项目 tsconfig.json 的改动如下：

{
"compilerOptions": {
"target": "es5",
- "module": "commonjs",
+ "module": "esnext",
+ "moduleResolution": "Node",
+ "allowSyntheticDefaultImports": true,
+ "esModuleInterop": true
...
}
},
}

也就是说，之前版本的 icestark 的默认产物是 commonjs 规范；2.6.0 的版本的默认产物会是 ES modules 规范。

ice.js 插件支持 ES modules 资源#

ice.js 可通过定制插件 build-plugin-icestark 快速接入 icestark。在该插件的最新版本中，我们支持开启 Vite 模式 的 ice.js 应用快速接入。

首先，需要将 build-plugin-icestark 升级至最新版本：

npm i build-plugin-icestark@latest -D

并将 ice.js 升级至 2.x 版本。详见升级指南。

然后，在微应用的构建配置（build.json）中，修改成 Vite 模式：

+ "vite": true,
"plugins": [
["build-plugin-icestark", {
+ "type": "child"
- "umd": true
}],
]

后续的版本计划#

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

  • 为 Vite 微应用提供对应的改造插件
  • 优化开发者开发体验，dev 下提供关键路径的 log 信息