From 15253905388d83c055d977d9a93e0d9e516f5261 Mon Sep 17 00:00:00 2001 From: gongshun <2440606146@qq.com> Date: Mon, 4 Sep 2023 10:44:12 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9Dadd=20the=20configuration=20of=20we?= =?UTF-8?q?bpack5=20(#2652)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/faq/README.md | 15 ++++++++++++--- docs/faq/README.zh.md | 15 ++++++++++++--- docs/guide/getting-started.zh.md | 5 +++-- docs/guide/tutorial.md | 5 +++-- docs/guide/tutorial.zh.md | 7 ++++--- 5 files changed, 34 insertions(+), 13 deletions(-) diff --git a/docs/faq/README.md b/docs/faq/README.md index 19633bf..97e84ae 100644 --- a/docs/faq/README.md +++ b/docs/faq/README.md @@ -30,9 +30,18 @@ To solve the exception, try the following steps: 6. If the development environment is OK but the production environment is not, check whether the `index.html` and `entry js` of the micro app are returned normally, for example, `404.html` is returned. -7. If you're using webpack5, please see [here](https://github.com/umijs/qiankun/issues/1092) +7. If you're using webpack5 and not using module federation, please see [here](https://github.com/umijs/qiankun/issues/1092#issuecomment-1109673224) -8. Check whether the main app and micro-app use AMD or CommonJS. Check method: run the main app and the micro-app independently, and enter the following code in the console: `(typeof exports === 'object' && typeof module === 'object') || (typeof define === 'function' && define.amd) || typeof exports === 'object'`，If it returns `true`，that it is caused by this reason, and there are mainly the following two solutions: +8. If you are using webpack5 and using module federation, you need to expose the life cycle function in the index file, and then expose the life cycle function externally in the bootstrap file. + + ```js + const promise = import("index"); + export const bootstrap = () => promise.then(m => m.boostrap()); + export const mount = () => promise.then(m => m.mount()); + export const unmount = () => promise.then(m => m.unmount()); + ``` + +9. Check whether the main app and micro-app use AMD or CommonJS. Check method: run the main app and the micro-app independently, and enter the following code in the console: `(typeof exports === 'object' && typeof module === 'object') || (typeof define === 'function' && define.amd) || typeof exports === 'object'`，If it returns `true`，that it is caused by this reason, and there are mainly the following two solutions: - Solution 1: Modify the `libraryTarget` of the micro-app `webpack` to `'window'`. @@ -49,7 +58,7 @@ To solve the exception, try the following steps: ``` - Solution 2: The micro-app is not bundle with `umd`, directly mount the life cycle function to the `window` in the entry file, refer to[Micro app built without webpack](/guide/tutorial#micro-app-built-without-webpack). -9. If it still not works after the steps above, this is usually due to browser compatibility issues. Try to **set the webpack `output.library` of the broken sub app the same with your main app registration for your app**, such as: +10. If it still not works after the steps above, this is usually due to browser compatibility issues. Try to **set the webpack `output.library` of the broken sub app the same with your main app registration for your app**, such as: Such as here is the main configuration: diff --git a/docs/faq/README.zh.md b/docs/faq/README.zh.md index 51905bb..19ae546 100644 --- a/docs/faq/README.zh.md +++ b/docs/faq/README.zh.md @@ -30,9 +30,18 @@ qiankun 抛出这个错误是因为无法从微应用的 entry js 中识别出 6. 如果开发环境可以，生产环境不行，检查微应用的 `index.html` 和 `entry js` 是否正常返回，比如说返回了 `404.html`。 -7. 如果你正在使用 webpack5，请看[这个 issues](https://github.com/umijs/qiankun/issues/1092)。 +7. 如果你正在使用 webpack5，但没用使用模块联邦，请看[这个 issues](https://github.com/umijs/qiankun/issues/1092#issuecomment-1109673224)。 + +8. 如果你正在使用 webpack5，并且使用了使用模块联邦。需要在 index 文件中暴露生命周期函数，然后在 bootstrap 文件向外暴露生命周期函数。 + + ```js + const promise = import("index"); + export const bootstrap = () => promise.then(m => m.boostrap()); + export const mount = () => promise.then(m => m.mount()); + export const unmount = () => promise.then(m => m.unmount()); + ``` -8. 检查主应用和微应用是否使用了 AMD 或 CommonJS 模块化。检查方法：单独运行微应用和主应用，在控制台输入如下代码：`(typeof exports === 'object' && typeof module === 'object') || (typeof define === 'function' && define.amd) || typeof exports === 'object'`，如果返回 `true`，则说明是这种情况，主要有以下两个解决办法： +9. 检查主应用和微应用是否使用了 AMD 或 CommonJS 模块化。检查方法：单独运行微应用和主应用，在控制台输入如下代码：`(typeof exports === 'object' && typeof module === 'object') || (typeof define === 'function' && define.amd) || typeof exports === 'object'`，如果返回 `true`，则说明是这种情况，主要有以下两个解决办法： - 解决办法1：修改微应用 `webpack` 的 `libraryTarget` 为 `'window'` 。 @@ -50,7 +59,7 @@ qiankun 抛出这个错误是因为无法从微应用的 entry js 中识别出 - 解决办法2：微应用不打包成 umd ，直接在入口文件把生命周期函数挂载到 window 上，参考[非 webpack 构建的微应用](/zh/guide/tutorial#非-webpack-构建的微应用)。 -9. 如果在上述步骤完成后仍有问题，通常说明是浏览器兼容性问题导致的。可以尝试 **将有问题的微应用的 webpack `output.library` 配置成跟主应用中注册的 `name` 字段一致**，如： +10. 如果在上述步骤完成后仍有问题，通常说明是浏览器兼容性问题导致的。可以尝试 **将有问题的微应用的 webpack `output.library` 配置成跟主应用中注册的 `name` 字段一致**，如： 假如主应用配置是这样的： diff --git a/docs/guide/getting-started.zh.md b/docs/guide/getting-started.zh.md index f3fbae2..fa53ea0 100644 --- a/docs/guide/getting-started.zh.md +++ b/docs/guide/getting-started.zh.md @@ -99,7 +99,7 @@ qiankun 基于 single-spa，所以你可以在[这里](https://single-spa.js.org 除了代码中暴露出相应的生命周期钩子之外，为了让主应用能正确识别微应用暴露出来的一些信息，微应用的打包工具需要增加如下配置： #### webpack: -如果你的项目使用的是 Webpack v5: +webpack v5: ```js const packageName = require('./package.json').name; @@ -111,7 +111,8 @@ module.exports = { }, }; ``` -Webpack v4: + +webpack v4: ```js const packageName = require('./package.json').name; diff --git a/docs/guide/tutorial.md b/docs/guide/tutorial.md index 8574260..672091d 100644 --- a/docs/guide/tutorial.md +++ b/docs/guide/tutorial.md @@ -131,6 +131,7 @@ It's important, When mount a sub-application through ReactDOM.render, need to en webpack: (config) => { config.output.library = `${name}-[name]`; config.output.libraryTarget = 'umd'; + // If you are using webpack 5, please replace jsonpFunction with chunkLoadingGlobal config.output.jsonpFunction = `webpackJsonp_${name}`; config.output.globalObject = 'window'; @@ -240,7 +241,7 @@ Take the `vue 2.x` project generated by `vue-cli 3+` as an example, and add it a output: { library: `${name}-[name]`, libraryTarget: 'umd', // bundle the micro app into umd library format - jsonpFunction: `webpackJsonp_${name}`, + jsonpFunction: `webpackJsonp_${name}`, // // If you are using webpack 5, please replace jsonpFunction with chunkLoadingGlobal }, }, }; @@ -331,7 +332,7 @@ Take the `angular 9` project generated by `Angular-cli 9` as an example, other v output: { library: `${appName}-[name]`, libraryTarget: 'umd', - jsonpFunction: `webpackJsonp_${appName}`, + jsonpFunction: `webpackJsonp_${appName}`, // // If you are using webpack 5, please replace jsonpFunction with chunkLoadingGlobal }, }; ``` diff --git a/docs/guide/tutorial.zh.md b/docs/guide/tutorial.zh.md index 6bfa522..590f6a7 100644 --- a/docs/guide/tutorial.zh.md +++ b/docs/guide/tutorial.zh.md @@ -131,7 +131,8 @@ start(); webpack: (config) => { config.output.library = `${name}-[name]`; config.output.libraryTarget = 'umd'; - config.output.jsonpFunction = `webpackJsonp_${name}`; + // webpack 5 需要把 jsonpFunction 替换成 chunkLoadingGlobal + config.output.jsonpFunction = `webpackJsonp_${name}`; config.output.globalObject = 'window'; return config; @@ -240,7 +241,7 @@ start(); output: { library: `${name}-[name]`, libraryTarget: 'umd', // 把微应用打包成 umd 库格式 - jsonpFunction: `webpackJsonp_${name}`, + jsonpFunction: `webpackJsonp_${name}`, // webpack 5 需要把 jsonpFunction 替换成 chunkLoadingGlobal }, }, }; @@ -331,7 +332,7 @@ start(); output: { library: `${appName}-[name]`, libraryTarget: 'umd', - jsonpFunction: `webpackJsonp_${appName}`, + jsonpFunction: `webpackJsonp_${appName}`, // webpack 5 需要把 jsonpFunction 替换成 chunkLoadingGlobal }, }; ```