SystemJS，将 importmap 与模块一起使用，需要做出反应

Question

我用 webpack 创建了一个 javascript 库，它输出一个 systemjs 模块。该模块依赖于 react，我将其指定为外部。生成的 javascript 文件的开头如下：

System.register(["react"], function(__WEBPACK_DYNAMIC_EXPORT__) {
var __WEBPACK_EXTERNAL_MODULE_react__;
return { ....

另外我有一个应用程序，它在运行时使用 SystemJS 来加载该模块。为了提供react依赖，我定义了一个importmap:

{
   "imports": {
      "react": "https://unpkg.com/react@16.11.0/umd/react.production.min.js"
   }
}

我导入模块的部分如下所示：

const modulePromise = System.import(MODULE_URL);
modulePromise.then(module => {
  console.log('module loaded successfully!');
});

现在的问题是，console.log 从未被调用，因为我得到一个 TypeError，即 "Component is not a property of undefined"，它告诉我，不知何故反应没有正确传递给我的模块。

准确地说，在我看到的浏览器网络选项卡中，我的模块和 react 导入确实已加载，但不知何故未正确处理。

有没有人知道我可能做错了什么？

Answer 1

好的，最后我自己解决了这个问题，虽然有点不同。

首先，我不再使用 unpkg link，但我实际上将 React 作为库包含在我的主应用程序中。

并且我将导入映射更改为：

<script type="systemjs-importmap">
   {
     "imports": {
       "react": "app:react",
       "react-dom": "app:react-dom"
     }
   }
</script>

同样在主应用程序中，我使用 SystemJs 中的 System.set(...) 来告诉 SystemJS 在哪里可以找到 'app:react' 和 'app:react-dom' 依赖项：

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'systemjs/dist/system.min';

...

System.set('app:react', { default: React, __useDefault: true });
System.set('app:react-dom', { default: ReactDOM, __useDefault: true });

现在，如果我通过 SystemJS 加载具有外部反应依赖项的模块，它就可以工作。

SystemJS，将 importmap 与模块一起使用，需要做出反应

SystemJS, using importmap with module, that needs react

javascript

reactjs

systemjs