在从 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>

然后我在 Babel 翻译的一些 .js 文件中用 JSX 编写我的 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 at ReactCardFlip.min.js:1 错误。

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

谢谢

Answer 1

虽然我建议您使用 npm，但您仍然可以使用脚本标签，但您必须包含一个模块加载器，例如用于 UMD 构建的 RequireJS：

<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>

Answer 2

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

您可以使用例如 react create app https://create-react-app.dev/docs/getting-started/ 轻松地开始实施 react app，然后创建 dist 文件，您可以将其包含为脚本标签。

Answer 3

最后，在与 NPM 斗争了很久之后，我决定使用 Browserify 将 NPM 模块直接导入到我的 javascript 中。它非常适合我需要的东西。

它的工作原理是将多个 javascript 文件捆绑到一个文件 (bundle.js) 中。这样做时，它会扫描 require(...)（无效 javascript）的代码，导入相关模块并将其直接放入 bundle.js.

我使用 Watchify 来自动执行此过程。运行脚本密切关注我的代码更改，然后自动在其上运行 Browserify。

例如，如果我想使用 react-string-replace，我只需这样做：

const reactStringReplace = require('react-string-replace')

mergedPhrase = reactStringReplace(
 mergedPhrase,
 lookup,
 (match, k) => (
 replacement
 )
)

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

Using external dependencies in React loaded from CDN

cdn

reactjs