Question

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

从我看到的所有示例中，似乎反应虚拟化和反应库在本地加载，然后在包含在网页中之前与Webpack捆绑在一起。现在我想通过cdnjs在没有Webpack的情况下使用它，只需用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';
...

Answer 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'
      }
    }
  }
});

Answer 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;
...

反应虚拟化，SystemJS和CDN

2 个答案:

main.jsx