SystemJS，使用 importmap 和模块，需要反应

Question

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

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

另外，我有一个应用程序，它在运行时使用 SystemJS 来加载该模块。为了提供反应依赖性，我定义了一个导入映射：

{
   "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，即“组件不是未定义的属性”，这告诉我，不知何故，反应尚未正确传递到我的模块。

准确地说，在浏览器网络选项卡中，我看到我的模块和反应导入确实已加载，但不知怎的，它没有被正确处理。

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

Answer 1

好吧，最终我自己解决了这个问题，尽管有点不同。

首先，我不再使用 unpkg 链接，但实际上我将 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 加载带有外部 React 依赖项的模块，它就可以工作。