3

我对 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 中将我的 ReactJS 写在 Babel 翻译的一些 .js 文件中，我像这样导入：

<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 更容易。

谢谢

4

3 回答 3

1

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
于 2020-07-27T15:54:59.597 回答
1

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

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

于 2020-07-27T16:04:14.873 回答
0

最后，在与 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
 )
)
于 2020-08-11T10:32:33.603 回答