Skip to content

Commit

Permalink
Merge branch 'master' into release/2.7.6
Browse files Browse the repository at this point in the history
  • Loading branch information
ClarkXia authored Sep 20, 2023
2 parents af18c9b + f4ba5c6 commit 74ce9ec
Show file tree
Hide file tree
Showing 7 changed files with 14 additions and 14 deletions.
12 changes: 6 additions & 6 deletions website/docs/faq.md
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@ module.exports = {

## Error: Invariant failed: You should not use `<withRouter(Navigation) />` outside a `<Router>`

因为 jsx 嵌套层级的关系,在主应用的 Layout 里没法使用 react-router 提供的 API,比如 `withRouter`, `Link`, `useParams` 等,具体参考文档 [主应用中路由跳转](./guide/use-layout/react#主应用中路由跳转)
因为 jsx 嵌套层级的关系,在主应用的 Layout 里没法使用 react-router 提供的 API,比如 `withRouter`, `Link`, `useParams` 等,具体参考文档 [主应用中路由跳转](guide/use-layout/react#主应用中路由跳转)

## 官方 Demo 如何启用 HashRouter

Expand Down Expand Up @@ -274,7 +274,7 @@ appHistory.push('/seller', true);

2. 添加 `fetch` polyfill

[`loadScriptMode`](./api/ice-stark#loadscriptmode)`fetch` 时,icestark 会使用 `window.fetch` 获取微应用静态资源,因此还需要对 `fetch` 进行 polyfill。这里,我们推荐 [whatwg-fetch](https://github.com/github/fetch)。请确保在 icestark 之前引入该资源。
[`loadScriptMode`](api/ice-stark#loadscriptmode)`fetch` 时,icestark 会使用 `window.fetch` 获取微应用静态资源,因此还需要对 `fetch` 进行 polyfill。这里,我们推荐 [whatwg-fetch](https://github.com/github/fetch)。请确保在 icestark 之前引入该资源。

```js
// 入口文件
Expand All @@ -301,7 +301,7 @@ proxy sandbox is not support by current browser

## 如何解决 Script Error

“Script error.” 是一个常见错误,但由于该错误不提供完整的报错信息(错误堆栈),问题排查往往无从下手。icestark 的 [scriptAttributes](./api/ice-stark#scriptattributes) 参数支持为加载的 `<script />` 资源添加 `crossorigin="anonymous"` 来解决这个问题。具体可参考 [scriptAttributes](./api/ice-stark#scriptattributes)
“Script error.” 是一个常见错误,但由于该错误不提供完整的报错信息(错误堆栈),问题排查往往无从下手。icestark 的 [scriptAttributes](api/ice-stark#scriptattributes) 参数支持为加载的 `<script />` 资源添加 `crossorigin="anonymous"` 来解决这个问题。具体可参考 [scriptAttributes](api/ice-stark#scriptattributes)

:::tip
想了解更多有关 Script Error 的问题,可以参考 <a href="https://help.aliyun.com/document_detail/88579.html">“Script error.”的产生原因和解决办法</a>
Expand All @@ -325,7 +325,7 @@ const Routes = () => {
}
```

这样,不会导致微应用正常加载,但微应用路由没有匹配成功时导致的页面空白,而会显示 404 页面。这样,我们能清晰地知道,在 icestark 执行环境下,需要修改[微应用的 basename](./guide/use-child/react#2-定义基准路由),使得微应用可以与当前路由匹配上。
这样,不会导致微应用正常加载,但微应用路由没有匹配成功时导致的页面空白,而会显示 404 页面。这样,我们能清晰地知道,在 icestark 执行环境下,需要修改[微应用的 basename](guide/use-child/react#2-定义基准路由),使得微应用可以与当前路由匹配上。

## Vite 微应用支持沙箱吗

Expand All @@ -338,7 +338,7 @@ const Routes = () => {

## 切换微应用,主应用样式丢失

通常情况是主应用开启了 webpack [Dynamic Imports](https://webpack.js.org/guides/code-splitting/#dynamic-imports) 能力,可以通过 [shouldAssetsRemove](./api/ice-stark#shouldassetsremove) 防止错误地移除主应用的样式资源。
通常情况是主应用开启了 webpack [Dynamic Imports](https://webpack.js.org/guides/code-splitting/#dynamic-imports) 能力,可以通过 [shouldAssetsRemove](api/ice-stark#shouldassetsremove) 防止错误地移除主应用的样式资源。

```js
// src/App.jsx
Expand All @@ -365,5 +365,5 @@ const App = () => {

## 主应用路由之间跳转导致重复渲染

如果主应用需要包含路由页面,在 [React 主应用接入](./guide/use-layout/react#主应用中如何包含路由页面) 我们推荐将主应用路由作为一个 `fallback` 微应用来使用。但由于在主应用路由切换时,上层组件状态改变会导致 `fallback` 应用重复渲染,因此推荐使用 [React.memo](https://reactjs.org/docs/react-api.html#reactmemo) 防止 React 组件重复渲染。具体示例可参考 [主应用中如何包含路由页面](./guide/use-layout/react#主应用中如何包含路由页面)
如果主应用需要包含路由页面,在 [React 主应用接入](guide/use-layout/react#主应用中如何包含路由页面) 我们推荐将主应用路由作为一个 `fallback` 微应用来使用。但由于在主应用路由切换时,上层组件状态改变会导致 `fallback` 应用重复渲染,因此推荐使用 [React.memo](https://reactjs.org/docs/react-api.html#reactmemo) 防止 React 组件重复渲染。具体示例可参考 [主应用中如何包含路由页面](guide/use-layout/react#主应用中如何包含路由页面)

4 changes: 2 additions & 2 deletions website/docs/guide.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ icestark 在保证一个系统的操作体验基础上,实现各个微应用
icestark 可以通过简单的命令行,生成主应用和微应用模板。无论您是使用 React 还是 Vue,都可以便捷的创建符合 icestark 微前端规范的项目。这些项目均由 icestark 团队官方维护。

:::tip
如果您想将正在开发中或已开发完成的项目接入 icestark,请移步[主应用接入](./guide/use-layout/react)[微应用接入](./guide/use-child/react)。如果您使用的是 [create-react-app](https://github.com/facebook/create-react-app) 、umi 等框架开发的应用,亦可参考[其它框架的接入指南](./guide/use-child/others)
如果您想将正在开发中或已开发完成的项目接入 icestark,请移步[主应用接入](guide/use-layout/react)[微应用接入](guide/use-child/react)。如果您使用的是 [create-react-app](https://github.com/facebook/create-react-app) 、umi 等框架开发的应用,亦可参考[其它框架的接入指南](guide/use-child/others)
:::

### 初始化主应用
Expand Down Expand Up @@ -49,5 +49,5 @@ $ npm run start
+ 现代浏览器和 IE11。

:::tip
对于 IE 系列浏览器,需要提供相应的 polyfill 支持。详细介绍,请参考[常见问题 -> 兼容 IE 浏览器](./faq#兼容-ie-浏览器)
对于 IE 系列浏览器,需要提供相应的 polyfill 支持。详细介绍,请参考[常见问题 -> 兼容 IE 浏览器](faq#兼容-ie-浏览器)
:::
2 changes: 1 addition & 1 deletion website/docs/guide/advanced/performance.md
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ start({
`prefetch` 值支持三种形式:

+ **布尔值**:当 `prefetch``true` 时,所以微应用资源均会被 `prefetch`;
+ **数组**:当传入值为 `name` 的数组时,只要数组中的微应用资源会被 `prefetch`;
+ **数组**:当传入值为 `name` 的数组时,只有数组中的微应用资源会被 `prefetch`;

```js
start({
Expand Down
2 changes: 1 addition & 1 deletion website/docs/guide/micro-module.md
Original file line number Diff line number Diff line change
Expand Up @@ -182,7 +182,7 @@ export default function ExampleComponent(props) {

## 已有项目改造为微模块

将已有项目改造为微模块的方式与 [微应用](./use-child/react) 类似,主要包含两步:
将已有项目改造为微模块的方式与 [微应用](use-child/react) 类似,主要包含两步:

#### 1. 应用入口导出生命周期函数

Expand Down
4 changes: 2 additions & 2 deletions website/docs/guide/use-child/others.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ order: 3
为一些使用 [`icejs`](https://ice.work/)[`create-react-app`](https://github.com/facebook/create-react-app)、umi 等三方框架的用户提供便利的接入指南。

:::tip
如果这里找不到您使用的框架类型,建议您通过[微应用接入三步骤](./react#已有-react-项目改造为微应用)来改造您的应用。所有的改造逻辑都是相通的,也欢迎您提供 <a href="https://github.com/ice-lab/icestark/pulls">PR</a> 介绍您的接入经验。
如果这里找不到您使用的框架类型,建议您通过[微应用接入三步骤](react#已有-react-项目改造为微应用)来改造您的应用。所有的改造逻辑都是相通的,也欢迎您提供 <a href="https://github.com/ice-lab/icestark/pulls">PR</a> 介绍您的接入经验。
:::

## icejs 应用
Expand Down Expand Up @@ -546,7 +546,7 @@ export default defineConfig({

### 配置基准路由

对于基准路由的配置,可以依照 [React 微应用接入](./react#2-%E5%AE%9A%E4%B9%89%E5%9F%BA%E5%87%86%E8%B7%AF%E7%94%B1)[Vue 微应用接入](./vue#2-%E5%AE%9A%E4%B9%89%E5%9F%BA%E5%87%86%E8%B7%AF%E7%94%B1) 相同的方式改造接入。
对于基准路由的配置,可以依照 [React 微应用接入](react#2-%E5%AE%9A%E4%B9%89%E5%9F%BA%E5%87%86%E8%B7%AF%E7%94%B1)[Vue 微应用接入](vue#2-%E5%AE%9A%E4%B9%89%E5%9F%BA%E5%87%86%E8%B7%AF%E7%94%B1) 相同的方式改造接入。

### 主应用加载 Vite 应用

Expand Down
2 changes: 1 addition & 1 deletion website/docs/guide/use-layout/react.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

## 通过官方脚手架创建

> 该官方脚手架基于 [icejs](https://ice.work/) 框架,如需使用其他框架/工程可按 [已有应用改造](./react#已有应用改造) 的方式接入。
> 该官方脚手架基于 [icejs](https://ice.work/) 框架,如需使用其他框架/工程可按 [已有应用改造](react#已有应用改造) 的方式接入。
```bash
$ npm init ice icestark-layout @icedesign/stark-layout-scaffold
Expand Down
2 changes: 1 addition & 1 deletion website/docs/guide/use-layout/vue.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

## 通过官方脚手架创建

> 该官方脚手架基于 Vue 2.0 + Vue CLI,如需使用其他框架/工程可按 [已有应用改造](./vue#已有应用改造) 的方式接入。
> 该官方脚手架基于 Vue 2.0 + Vue CLI,如需使用其他框架/工程可按 [已有应用改造](vue#已有应用改造) 的方式接入。
> 需注意,目前 @vue-materials/icestark-layout-app 1.x 采用 Vite + icestark + vue3 框架应用。
```bash
Expand Down

0 comments on commit 74ce9ec

Please sign in to comment.