如何使用 drupal 自定义模块在 drupal 8 中集成反应应用程序？

Question

我对 react 和 drupal 8 非常陌生。我知道在 drupal 和 react SPA 中创建自定义模块，但我无法使用 drupal8 控制器调用我的 react 应用程序。 有人可以让我弄清楚将反应应用程序集成到drupal 8中的流程和正确方法吗？

Answer 1

因此，从常规的 Drupal 控制器层或 Drupal 8 的 twig 模板中调用 React 应用程序并没有真正的好方法。

人们通常有两种方式将 React 应用程序连接到 D8。

选项 1 - 逐步解耦站点 - 这是 Drupal 仍然使用 TWIG 引擎生成绝大多数站点视图的地方，并且可以在站点的一小部分使用 React，同时通过基于 Drupal 的 Web 服务与 Drupal 通信。查看此项目以获取更多信息 - https://www.drupal.org/project/pdb。如果您只想添加一个基于 React 的小型小部件，但又希望您的大部分网站使用标准 TWIG，这是一个不错的选择。

选项 2 - 完全解耦站点 - 这是您使用 React 呈现 100% 的应用程序视图层的地方，并且只需使用 Drupal 作为提供 Web 服务的 CMS。网络服务部分有多个选项，包括https://www.drupal.org/project/graphql 和https://www.drupal.org/docs/8/api/restful-web-services-api/restful-web-services-api-overview。因此，这方面的一个示例是在静态服务器上提供 create-react-app 并通过 Web 服务与 D8 通信。

以下是一些可能有助于指导您做出决定的附加信息。 https://dri.es/how-to-decouple-drupal-in-2018

祝你好运！

Answer 2

带有一些假设的长篇文章（但它有效）： 我正在寻求实现相同的目标（Drupal 8 和反应解耦块），我搜索再搜索，我发现自己不止一次返回这个页面，所以我将把我发现的小东西留在这里。 我的假设：

• 您已经创建了一个具有自己的树枝模板的自定义块。
• 您已在库文件中定义了库（我们将对此进行审核）
• 您在模块的根文件夹中有created your react app 和npx create-react-app my-app。

create-react-app my-app 在 my-app 文件夹中创建一个 react 应用，my-app 包含所有的 react 代码和配置。为了让我们的应用程序（自定义反应 js 库）与 drupal 一起运行，我们需要覆盖一些东西，比如重命名我们的文件（构建命令）的脚本，以使 drupal 可以识别（识别）和加载。 运行yarn add react-app-rewired --dev，下载react app rewire，让我们覆盖默认的react-app 配置，而不必弹出我们的应用程序。 在 react-app 文件夹的根目录中，创建一个名为 config-overrides.js 的文件，该文件应包含以下代码

module.exports = function override(config, env) {

  config.optimization.runtimeChunk = false;
  config.optimization.splitChunks = {
    cacheGroups: {
      default: false
    }
  };

  return config;
};

并将 package.json 中的脚本编辑为

"build": "react-app-rewired build && yarn run build:dist",
"build:dist": "cd build && copy static\\js\\*.js main.js && copy static\\css\\*.css main.css",

注意：我已经编辑了构建命令并添加了 build:dist 脚本（但是如果不在 Windows 上，请 在 build:dist 中用 cp 和 \\ 替换 copy 和 /）。这将确保每次运行构建脚本时，您的构建文件都将重命名为 main.js 和 main.css，而没有文件名..js/css，我们可以在 library.yml 文件中引用它们。

我的 modulename.libraries.yml 看起来像这样（文件名 = modern_js_drupal.libraries.yml）

react_local:
  version: 1.x
  js:
    my-app/build/main.js: {}
  css:
     layout:
       my-app/build/main.css: {}

还有我的 block.html.twig

<div class="row">
  <div id="root">
    <h4>React App</h4>
</div>

{{ attach_library('modern_js_drupal/react_local') }}

我将我的 div 命名为“root”而不是其他任何东西的原因是因为 React 应用程序在呈现您的应用程序时使用相同的 id。 查看 react_js/public/index.html 和 react_js/src/index.js。 index.html 提供了 div 以将我们的应用程序连接到 index.js 中，并在提供的 div 上呈现应用程序 (ReactDOM.render(<App />, document.getElementById('root'));)，在开发过程中这样做的好处是，您可以创建应用程序并立即在应用程序上查看更改(http://localhost:3000/)，您可以稍后运行 yarn build 以查看您的 drupal 8 站点上的最新更改。