Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: update doc #682

Closed
wants to merge 3 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion pnpm-workspace.yaml
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@

packages:
- 'packages/**'
- 'dev/**'
Expand Down
3 changes: 2 additions & 1 deletion website/docs/guide/advance/nested.md
Original file line number Diff line number Diff line change
Expand Up @@ -50,4 +50,5 @@ order: 2
- [`Garfish.loadApp`](/api/loadapp) 的方式加载、渲染微前端子应用
- 使用 `Garfish` 实例的方法时,需要注意默认配置是否收到了全局配置或其他应用的影响
- `Garfish` 包的升级,会同时影响、主应用和微主应用
:::

:::
4 changes: 2 additions & 2 deletions website/docs/guide/advance/plugins.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,11 @@ import AfterUnmount from '@site/src/components/lifeCycle/\_afterUnmount.mdx';
import ErrorUnmountApp from '@site/src/components/lifeCycle/\_errorUnmountApp.mdx';
import OnNotMatchRouter from '@site/src/components/lifeCycle/\_onNotMatchRouter.mdx';

Garfish 框架引入了插件化机制,目的是为了让开发者能够通过编写插件的方式扩展更多功能,或为自身业务定制个性化功能;同时框架的基础能力也都是通过插件机制来实现,确保框架核心足够精简和稳定。
Garfish 框架引入了插件化机制,目的是为了让开发者能够通过编写插件的方式来扩展更多功能,或为自身业务定制个性化功能;同时框架的基础能力也都是通过插件机制来实现,确保框架核心足够精简和稳定。

## 插件能做什么

插件的功能范围没有严格的限制——一般有下面两种:
插件的功能范围没有严格的限制一般有下面两种:

1. 添加全局方法或增加默认参数
2. 在应用的生命周期中自定义功能(例如:`Garfish router`、`Garfish sandbox`)
Expand Down
6 changes: 3 additions & 3 deletions website/docs/guide/concept/buildConfig.md
Original file line number Diff line number Diff line change
Expand Up @@ -65,13 +65,13 @@ new Function('require', 'exports', code)(fakeRequire, fakerExports);

> `jsonpFunction` 配置的作用

`jsonpFunction` 的配置主要也与沙箱的机制有关, `Garfish` 的沙箱子应用的执行上下文 `window` 主要来自于主应用,当主应用与子应用都是用相同的 `key` 作为子应用 `jsonp` 存储 `chunk` 的方式时,子应用的 `chunk` 可能会受到主应用和其他应用的影响,因此通过 `jsonpFunction` 配置能够避免应用间的 `chunk` 互相应用
`jsonpFunction` 的配置主要也与沙箱的机制有关, `Garfish` 的沙箱子应用的执行上下文 `window` 主要来自于主应用,当主应用与子应用都是用相同的 `key` 来作为子应用 `jsonp` 存储 `chunk` 的方式时,子应用的 `chunk` 可能会受到主应用和其他应用的影响,因此通过 `jsonpFunction` 配置能够避免应用间的 `chunk` 互相应用

## publicPath

通过 `publicPath` 配置将微前端子应用的资源路径转换成绝对路径,为什么需要降子应用的资源路径转换成绝对路径呢
通过 `publicPath` 配置将微前端子应用的资源路径转换成绝对路径,为什么需要将子应用的资源路径转换成绝对路径呢

- 子应用在独立运行时,使用相对路径的接口时,接口请求的路径是,当前页面域名+相对路径
- 但是在主应用时,子应用使用相对路径的接口,请求的路径按道理来说还是,当前域名+相对路径

当在微前端的场景下如果 `Garfish` 让子应用走「当前域名+相对路径」会发生更多的异常请求(`hmr` 热更新、`websocket`、`server worker` ...),因为子应用的域名并不一定是与主应用一致,因此 `Garfish` 框架会对相对路径的资源和请求去进行修正,修正的参照物为基础域名为子应用的路径,在本地开发时可能是正常的,但是发到线上出现问题,原因在于发布到线上之后,子应用的入口有可能会走 `CDN`。因此参照的基础路径就变为了 CDN 前缀。那么此时子应用的相对路径请求就变为了 `CDN` 前缀。这一块做了很对权衡,因为 `hmr`、`websocket`、`server worker` 这些内容可能难以被用户控制,所以默认走的还是修正模式。
当在微前端的场景下如果 `Garfish` 让子应用走「当前域名+相对路径」会发生更多的异常请求(`hmr` 热更新、`websocket`、`server worker` ...),因为子应用的域名并不一定是与主应用一致,因此 `Garfish` 框架会对相对路径的资源和请求去进行修正,修正的参照物为基础域名为子应用的路径,在本地开发时可能是正常的,但是发到线上出现问题,原因在于发布到线上之后,子应用的入口有可能会走 `CDN`。因此参照的基础路径就变为了 CDN 前缀。那么此时子应用的相对路径请求就变为了 `CDN` 前缀。这一块做了很多权衡,因为 `hmr`、`websocket`、`server worker` 这些内容可能难以被用户控制,所以默认走的还是修正模式。
3 changes: 2 additions & 1 deletion website/src/components/config/_webpackConfig.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -42,4 +42,5 @@ module.exports = {
3. 如果你的 webpack 为 v4 版本,需要设置 jsonpFunction 并保证该值唯一(否则可能出现 webpack chunk 互相影响的可能)。若为 webpack5 将会直接使用 package.json name 作为唯一值,请确保应用间的 name 各不相同;
4. publicPath 设置为子应用资源的绝对地址,避免由于子应用的相对资源导致资源变为了主应用上的相对资源。这是因为主、子应用处于同一个文档流中,相对路径是相对于主应用而言的
5. 'Access-Control-Allow-Origin': '\*' 允许开发环境跨域,保证子应用的资源支持跨域。另外也需要保证在上线后子应用的资源在主应用的环境中加载不会存在跨域问题(**也需要限制范围注意安全问题**);
:::

:::
Loading