如何将 React 作为 NPM 包添加到 Apostrophe v3？答案

【问题标题】：How do you add React as NPM package to Apostrophe v3?如何将 React 作为 NPM 包添加到 Apostrophe v3？
【发布时间】：2021-09-08 04:43:14
【问题描述】：

我们正在使用 Apostrophe CMS v3，并且我们正在尝试使用 React 将一些自定义应用程序添加到页面中。我能够使用 React CND 脚本在内部添加组件，并将组件作为脚本文件加载到 views/layout.html 中。但这可能不是最佳实践。我想知道是否有一种方法可以使用 npm 包和导入将 React 应用程序添加到 Apostrophe 中。非常感谢！

【问题讨论】：

标签： reactjs apostrophe-cms

【解决方案1】：

这个问题似乎被交叉发布到 Github 讨论论坛：https://github.com/apostrophecms/apostrophe/discussions/3393

首席软件架构师的回复：

您可以通过两种方式进行操作。哪个最好取决于您的需求。

如果您正在构建一个单页 React 应用程序，但您需要一些动态编辑的 CMS 内容，那么您很可能应该像以前一样继续构建您的 React 应用程序，并使用 Apostrophe 的 REST API 来访问片段和您需要的页面 CMS 内容。请参阅我们的 REST API 文档。

另一方面，如果您正在构建一个非常普通的 CMS 驱动的网站但是您的网页中有一些经验可以从中受益嵌入一个 React 应用程序，你应该继续使用你的 Nunjucks Apostrophe 的模板，就像您通常构建网站一样撇号，另外设置一个你自己的 webpack 构建来构建您的 React 应用程序，并将输出推送到嵌套的 ui/public/build.js 文件在撇号项目的任何模块中。在 a 中找到的任何 .js 文件 ui/public 模块的子目录自动包含在 Apostrophe 生成的前端包。

在这种情况下，您仍然可以使用 REST API 从 React 应用程序，或者您可以通过标记中的数据属性传递数据。如果你做后者，| jsonAttribute Nunjucks 过滤器有助于转动它到一个字符串中，该字符串可以安全地合并到一个带引号的属性中你的标记。

希望有帮助！

【讨论】：