reactjs - 在从 CDN 加载的 React 中使用外部依赖项

Question

我对 ReactJS 比较陌生，正在将它用于现有应用程序中的某些交互元素。我从 CDN 导入 React 和 ReactDOM:

<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>

然后我在 JSX 中用 Babel 翻译的一些 .js 文件编写我的 ReactJS，然后像这样导入:

<script src="/static/react/NameScores.js"></script>

我的问题是有时我想使用外部依赖项，但我终究无法弄清楚如何正确导入它们。

比如我想用react-card-flip。它似乎有一个 CDN，所以我这样导入它:

<script src="https://cdnjs.cloudflare.com/ajax/libs/react-card-flip/1.0.10/ReactCardFlip.min.js"></script>

但它不起作用。我得到一个 ReactCardFlip.min.js:1 Uncaught ReferenceError: exports is not defined
在 ReactCardFlip.min.js:1 错误。

如何在基于 CDN 的设置中使用外部依赖项？我必须使用 NPM 吗？我已经尝试过，但无法通过 NPM 让 React 工作，而 CDN 更容易。

谢谢

Answer 1

我认为迁移到 npm 包是最好的选择。首先，并不是所有的包都可以在 cdn 上使用，其次，仅使用脚本标签很难维护包的版本。我强烈建议转到 npm/yarn 方向，即使从 React 创作者的角度来看，它也是更可取的选择。

您可以使用例如 react create app https://create-react-app.dev/docs/getting-started/轻松开始实现 React 应用程序，然后创建可以作为脚本标签包含的 dist 文件。