我可以从 CDN 使用 React-Select Async (AsyncSelect) 吗？（我收到 Uncaught ReferenceError：exports is not defined）答案

【问题标题】：Can I use React-Select Async (AsyncSelect) from a CDN? (I'm getting Uncaught ReferenceError: exports is not defined)我可以从 CDN 使用 React-Select Async (AsyncSelect) 吗？（我收到 Uncaught ReferenceError：exports is not defined）
【发布时间】：2019-05-03 18:35:08
【问题描述】：

根据项目经理的要求，我不能将它与 npm 捆绑，所以我坚持使用每个库的 CDN 版本。
到目前为止，一切都运行良好，React、Material-UI、React-Select 和 Babel。

但尝试包含 Async.js (https://unpkg.com/react-select/lib/Async.js) 给了我Uncaught ReferenceError: exports is not defined

我看到在https://unpkg.com/react-select/dist/react-select.js 中有对Async 和AsyncSelect 的引用，但我不知道如何使用AsyncSelect 组件，如https://react-select.com/async 所示

这就是我使用库的方式：

<script src="https://unpkg.com/react@16.7.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.js"></script>
<script src="https://unpkg.com/@material-ui/core/umd/material-ui.development.js"></script>
<script src="https://unpkg.com/react-select@2.1.2/dist/react-select.js"></script>
<!-- ... and other dependencies -->

【问题讨论】：

标签： javascript reactjs react-select

【解决方案1】：

如果您引用this other question 并复制/粘贴此答案中的所有依赖项，您将能够访问react-select 元素。

<script src="https://unpkg.com/react@16.7.0/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/emotion@9.2.12/dist/emotion.umd.min.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/prop-types@15.5.10/prop-types.min.js"></script>
<script src="https://unpkg.com/react-input-autosize@2.2.1/dist/react-input-autosize.min.js"></script>
<script src="https://unpkg.com/react-select@2.1.2/dist/react-select.min.js"></script>

一旦完成Async，特定组件将可以通过Select.Async 访问，如下例所示：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<script src="https://unpkg.com/react@16.7.0/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/emotion@9.2.12/dist/emotion.umd.min.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/prop-types@15.5.10/prop-types.min.js"></script>
<script src="https://unpkg.com/react-input-autosize@2.2.1/dist/react-input-autosize.min.js"></script>
<script src="https://unpkg.com/react-select@2.1.2/dist/react-select.min.js"></script>

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  </head>
<body>
 <div id="root"></div>
      <script type="text/babel">


      const options = [
        { value: 'chocolate', label: 'Chocolate' },
        { value: 'strawberry', label: 'Strawberry' },
        { value: 'vanilla', label: 'Vanilla' }
      ];

      class App extends React.Component {
        state = {
          selectedOption: null,
        }
        handleChange = (selectedOption) => {
          this.setState({ selectedOption });
          console.log(`Option selected:`, selectedOption);
        }
        render() {
          const { selectedOption } = this.state;

          return (
            <div>
            Test Text
            <Select.Async
              value={selectedOption}
              onChange={this.handleChange}
              options={options}
            />
            </div>
          );
        }
      }

      ReactDOM.render(<App/>, document.querySelector("#root"))
      </script>
    </body>
</html>

【讨论】：

哇，谢谢 beaucoup，劳拉，我正在测试它以将其标记为已解决。
更新：完美运行。谢谢！