From 130dc14930627cbd3f0bea7a0d33eb36890c1b1d Mon Sep 17 00:00:00 2001 From: Rain120 <1085131904@qq.com> Date: Tue, 10 Sep 2024 13:09:35 +0800 Subject: [PATCH 1/3] feat: update doc about webpack config --- pnpm-workspace.yaml | 1 - website/src/components/config/_webpackConfig.mdx | 3 ++- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index d5181951b..d44212c22 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -1,4 +1,3 @@ - packages: - 'packages/**' - 'dev/**' diff --git a/website/src/components/config/_webpackConfig.mdx b/website/src/components/config/_webpackConfig.mdx index 668cddb61..c811320f3 100644 --- a/website/src/components/config/_webpackConfig.mdx +++ b/website/src/components/config/_webpackConfig.mdx @@ -42,4 +42,5 @@ module.exports = { 3. 如果你的 webpack 为 v4 版本，需要设置 jsonpFunction 并保证该值唯一（否则可能出现 webpack chunk 互相影响的可能）。若为 webpack5 将会直接使用 package.json name 作为唯一值，请确保应用间的 name 各不相同； 4. publicPath 设置为子应用资源的绝对地址，避免由于子应用的相对资源导致资源变为了主应用上的相对资源。这是因为主、子应用处于同一个文档流中，相对路径是相对于主应用而言的 5. 'Access-Control-Allow-Origin': '\*' 允许开发环境跨域，保证子应用的资源支持跨域。另外也需要保证在上线后子应用的资源在主应用的环境中加载不会存在跨域问题（**也需要限制范围注意安全问题**）； - ::: + +::: From 577f00f26d21fdfc1dd885ad1659e1a4513e37be Mon Sep 17 00:00:00 2001 From: Rain120 <1085131904@qq.com> Date: Wed, 11 Sep 2024 11:28:27 +0800 Subject: [PATCH 2/3] feat: update doc with build config --- website/docs/guide/concept/buildConfig.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/website/docs/guide/concept/buildConfig.md b/website/docs/guide/concept/buildConfig.md index 5406b04a3..d296d5bf7 100644 --- a/website/docs/guide/concept/buildConfig.md +++ b/website/docs/guide/concept/buildConfig.md @@ -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` 这些内容可能难以被用户控制，所以默认走的还是修正模式。 From 8cdb63605cd12a4c63a453f597df399dc5a7fb7d Mon Sep 17 00:00:00 2001 From: Rain120 <1085131904@qq.com> Date: Wed, 11 Sep 2024 11:47:33 +0800 Subject: [PATCH 3/3] feat: update doc with advance --- website/docs/guide/advance/nested.md | 3 ++- website/docs/guide/advance/plugins.md | 4 ++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/website/docs/guide/advance/nested.md b/website/docs/guide/advance/nested.md index bb5c72205..071abca98 100644 --- a/website/docs/guide/advance/nested.md +++ b/website/docs/guide/advance/nested.md @@ -50,4 +50,5 @@ order: 2 - [`Garfish.loadApp`](/api/loadapp) 的方式加载、渲染微前端子应用 - 使用 `Garfish` 实例的方法时，需要注意默认配置是否收到了全局配置或其他应用的影响 - `Garfish` 包的升级，会同时影响、主应用和微主应用 - ::: + +::: diff --git a/website/docs/guide/advance/plugins.md b/website/docs/guide/advance/plugins.md index 72531cfea..df13c989c 100644 --- a/website/docs/guide/advance/plugins.md +++ b/website/docs/guide/advance/plugins.md @@ -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`）