是否可以在浏览器中从cdn使用react-select？

Question

是否可以直接从浏览器使用react-select，而不需要 现在的捆绑商？

我发现能够这样做的最新版本是 2.1.2： 如何使用 React 和 Babel 从 React-Select CDN 导入？

他们当时以 umd 格式提供

react-select.min.js

。

现在他们有

react-select.browser.esm.js

和

react-select.browser.cjs.js

(https://unpkg.com/browse/[email protected]/dist/)，但我无法从浏览器中获得任何这些功能。

Answer 1

我想通了。希望这可以帮助其他人。永不放弃。

react-select v3（目前是v3.1.1）不再有独立的lib，所以使用它的唯一方法是通过v2。

要使用 v2，您需要首先包含所有依赖项。

<div id="root"></div>

<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/[email protected]/babel.min.js"></script>
<script src="https://unpkg.com/[email protected]/prop-types.js"></script>
<script src="https://unpkg.com/[email protected]/index.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-input-autosize.js"></script>
<script src="https://unpkg.com/[email protected]/dist/emotion.umd.min.js"></script><script src="https://unpkg.com/[email protected]/dist/react-select.js"></script>

<script type="text/babel">

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

    class Hello extends React.Component {
        render() {
            return <Select options={options} />;
        }
    }
    ReactDOM.render(
        <Hello />,
        document.getElementById('root')
    );
</script>

Answer 2

从 v3（及更高版本）开始，他们已弃用了 UMD 版本，因此您必须使用带有

<script data-type="module">

的 ESM 版本。请参阅此处了解更多信息：https://github.com/JedWatson/react-select/issues/4120#issuecomment-739138229和示例此处。

Answer 3

我将当前

v5.8.0

版本捆绑并发布为 CDN：

https://github.com/react-select-builds/v5.8.0

用途：

<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script type="module">
import Select from "https://react-select-builds.github.io/v5.8.0/dist/react-select.esm.min.js";

const { React, ReactDOM } = window;

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

function YourAwesomeApp(props) {
    return React.createElement("main", {}, 
        <Select
            onChange={option => console.log("option selected", option)}
            options={options}
        />
    );
}

ReactDOM.createRoot(document.getElementById("your-react-root"))
    .render(React.createElement(YourAwesomeApp, {}));
</script>