首先介绍下这篇文章依赖的知识和背景：

• UmiJS: 插件化的企业级前端应用框架。
• qiankun: 基于 single-spa 的企业级微前端库。
• RequireJS: AMD 模块加载库。
• 这篇文章中 UmiJS 使用 @umijs/plugin-qiankun 插件来支持微前端。

报错内容

复现案例：umi-qiankun-requirejs-issue

直接打开子项目

报错：Mismatched anonymous define() module

错误详细描述；https://requirejs.org/docs/errors.html#mismatch

在主项目中打开子项目

报错：[qiankun]: You need to export lifecycle functions in slave entry

错误详细描述；https://qiankun.umijs.org/zh/faq#application-died-in-status-loading_source_code-you-need-to-export-the-functional-lifecycles-in-xxx-entry

解决方案

在 .umirc.ts 中加上如下配置：

1chainWebpack(memo) {
2  memo.output.libraryTarget('window');
3},

PS：这个解决方案在 qiankun 的文档里也提到了。

原因

webpack output.libraryTarget 配置

普通项目直接打开时没有报错，但改为微前端作为子项目直接打开时报错了，那一定是改为微前端后打包出来的代码变了。下面对比一下打包后的代码：

微前端项目打包的开头：

 1(function webpackUniversalModuleDefinition(root, factory) {
 2	if(typeof exports === 'object' && typeof module === 'object')
 3		module.exports = factory();
 4	else if(typeof define === 'function' && define.amd)
 5		define([], factory);
 6	else if(typeof exports === 'object')
 7		exports["umi-t-umi"] = factory();
 8	else
 9		root["umi-t-umi"] = factory();
10})(window, function() {
11return /******/ (function(modules) { // webpackBootstrap
12/******/ 	// The module cache
13/******/ 	var installedModules = {};
14// ...

普通项目打包的开头：

1/******/ (function(modules) { // webpackBootstrap
2/******/ 	// The module cache
3/******/ 	var installedModules = {};

容易看出它们的 webpack 的 output.libraryTarget 配置不同。

通过查看@umijs/plugin-qiankun 的源码发现确实这个配置被修改：

1config.output
2  .libraryTarget("umd")
3  .library(
4    shouldNotAddLibraryChunkName ? api.pkg.name : `${api.pkg.name}-[name]`
5  );

只修改这个配置普通情况下不报错，引入 RequireJS 才报错，下面进一步研究下 RequireJS。

RequireJS define

直接启动子项目的报错是因为不能在 script 标签引的 JS 里用匿名 define （RequireJS 虽然支持匿名 define 但必须通过 RequireJS 去引）。下面是一个例子：

test-module.js

 1// test-module.js
 2
 3define(function () {
 4  console.log("define");
 5
 6  return {
 7    foo: "foo",
 8    bar: "bar",
 9  };
10});

test-define.html

 1<script src="https://cdn.jsdelivr.net/npm/[email protected]/require.js"></script>
 2
 3<!-- 不报错 -->
 4
 5<script>
 6  require(["./test-module.js"], function (module) {
 7    console.log(module.foo);
 8  });
 9</script>
10
11<script>
12  require(["test-module"], function (module) {
13    console.log(module.foo);
14  });
15</script>
16
17<!-- 报错 -->
18
19<script src="./test-module.js"></script>
20
21<script>
22  define(function () {
23    console.log("define");
24
25    return {
26      foo: "foo",
27      bar: "bar",
28    };
29  });
30</script>

这里还有一个有趣的现象：

RequireJS 会在加载后 4ms (nextTick) 清一下队列，对于 4ms 后 define 的模块会在下次清队列时处理。

所以下面这段代码不会报错，但如果放开调用 require 函数的注释就会报错。

 1<script src="https://cdn.jsdelivr.net/npm/[email protected]/require.js"></script>
 2
 3<!-- 不报错 -->
 4
 5<script>
 6  setTimeout(function () {
 7    define([], function () {
 8      console.log("define");
 9
10      return {
11        foo: "foo",
12        bar: "bar",
13      };
14    });
15
16    // 放开下面这行调用 require 函数的注释会报错
17    // require();
18  }, 5);
19</script>

在主项目中打开子项目，qiankun 是通过 fetch 拉下来子项目 JS 然后再执行的，这时已经过了 4ms，所以 define 的模块这时还并未执行，报错的原因要继续研究下 qiankun 生命周期。

qiankun 生命周期

qiankun 在加载子项目时会去检查入口脚本是否暴露生命周期，没有检查到会报错。

检查顺序：

1. 入口脚本的导出（通过看 qiankun 内部使用的 import-html-entry 的源码， scriptExports 应该一直是 undefined）；
2. 入口脚本最后赋值的变量；
3. 入口脚本的全局上的 ${appName} 属性。

qiankun 生命周期检查源码：

 1function getLifecyclesFromExports(
 2  scriptExports: LifeCycles<any>,
 3  appName: string,
 4  global: WindowProxy,
 5  globalLatestSetProp?: PropertyKey | null
 6) {
 7  if (validateExportLifecycle(scriptExports)) {
 8    return scriptExports;
 9  }
10
11  // fallback to sandbox latest set property if it had
12  if (globalLatestSetProp) {
13    const lifecycles = (<any>global)[globalLatestSetProp];
14    if (validateExportLifecycle(lifecycles)) {
15      return lifecycles;
16    }
17  }
18
19  if (process.env.NODE_ENV === "development") {
20    console.warn(
21      `[qiankun] lifecycle not found from ${appName} entry exports, fallback to get from window['${appName}']`
22    );
23  }
24
25  // fallback to global variable who named with ${appName} while module exports not found
26  const globalVariableExports = (global as any)[appName];
27
28  if (validateExportLifecycle(globalVariableExports)) {
29    return globalVariableExports;
30  }
31
32  throw new Error(
33    `[qiankun] You need to export lifecycle functions in ${appName} entry`
34  );
35}

主项目中打开子项目报错的原因也可以确定了：检查到入口脚本没有暴露生命周期。

总结

遇到报错首先还是要先看文档，这样可以快速解决问题。如果问题很难定位可以考虑二分法和控制变量法将问题范围缩小，定位到问题后就容易解决了。广泛被使用的库会包含处理各种复杂情况的逻辑，结合在一起使用可能会各种奇怪，为什么这样报错了真奇怪，为什么这样不报错真奇怪，想理清这些奇怪真不太容易。