反应虚拟化，SystemJS 和 CDN答案

【问题标题】：react-virtualized, SystemJS and CDN反应虚拟化，SystemJS 和 CDN
【发布时间】：2016-11-21 22:12:03
【问题描述】：

我想通过 cdnjs 和 SystemJS 在 Web 应用程序中使用 react-virtualized。

从我看到的所有示例来看，react-virtualized 和 react 库似乎是在本地加载的，然后在包含在网页中之前与 Webpack 捆绑在一起。现在我想通过没有 Webpack 的 cdnjs 使用它，只需使用 SystemJS 导入它。但是当我尝试这样做时，我收到错误消息说它找不到 React。

我想知道是否有人以前尝试过这个，以及 react-virtualized 是否完全支持这个。谢谢。

更新： 为了清楚起见，我包含了一些代码来显示我正在尝试做的事情。

index.html：

...
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.20.0-alpha.1/system.js"></script>
  <script>
    System.config({
        map: {
            "react":"https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js",
            "react-dom":"https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js",
            "react-virtualized":"https://unpkg.com/react-virtualized/dist/umd/react-virtualized.js"
        }
  </script>
</head>
...

main.jsx：

import React from 'react';
import ReactDOM from 'react-dom';
import {Table, Column} from 'react-virtualized';
...

【问题讨论】：

标签： reactjs react-virtualized

【解决方案1】：

使用 react-virtualized 的 UMD 版本可以实现您正在做的事情。你可以看到一个例子here。不过，为了使其正常工作，您还需要导入 react-with-addons 和 react-dom 的 UMD 版本，因为 react-virtualized 取决于它们。

例如：

<script src="https://unpkg.com/react/dist/react-with-addons.min.js"></script>
<script src="https://unpkg.com/react-dom/dist/react-dom.min.js"></script>
<script src="https://unpkg.com/react-virtualized/dist/umd/react-virtualized.js"></script>

react-virtualized UMD 构建期望 React 和 ReactDOM 加载到全局空间中。

另外，SystemJS 应该有一种方法可以将 react-dom 和 react-with-addons 公开为全局变量，供 react-virtualized 之类的库使用。我不是 SystemJS 用户，但我认为它可能是这样的：

System.config({
  meta: {
    'path/to/react-virtualized.js': {
      globals: {
        React: 'path/to/react-addons-shallow-compare.js',
        ReactDOM: 'path/to/react-dom.js'
      }
    }
  }
});

【讨论】：

谢谢@brianvaughn。在您的示例中，您已将反应库加载为全局变量。如果我使用 SystemJS 将它们作为模块导入，UMD 构建是否仍然有效？
react-virtualized UMD 构建期望 React 和 ReactDOM 加载到全局空间中。可能还有另一种更好的选择。我将编辑我的答案以提及它，b'c 它会从格式化中受益，而 cmets 不支持。

【解决方案2】：

已经有一段时间了，但我有时间再看一遍。感谢@brianvaughn 的建议，我设法通过以下方式解决了这个问题：

System.config({
   meta: {
      "react-virtualized": {
         exports: "ReactVirtualized",
         format: "global",
         globals: {
            React: "react",
            ReactDOM: "react-dom"
         }
      }
   },
   map: {
      "react":    "https://unpkg.com/react@16/umd/react.production.min.js",
      "react-dom":"https://unpkg.com/react-dom@16/umd/react-dom.production.min.js",
      "react-virtualized":"https://cdnjs.cloudflare.com/ajax/libs/react-virtualized/9.10.1/react-virtualized.min.js",
   }
})

main.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import * as ReactVirtualized from 'react-virtualized';

let Table = ReactVirtualized.Table;
let Column = ReactVirtualized.Column;
let AutoSizer = ReactVirtualized.AutoSizer;
...

【讨论】：