在 CakePHP 项目中设置 React答案

【问题标题】：Setting up React in a CakePHP project在 CakePHP 项目中设置 React
【发布时间】：2016-04-15 15:32:37
【问题描述】：

如何使用 webpack 在 CakePHP webroot 中设置 React？

我有一个现有的CakePHP 项目（带有模型、视图、控制器）。我想在其 webroot (Project/Miniproject/index.html) 中设置 mini React 项目。 index.html 将对控制器中定义的 api 进行 ajax 调用。

- Project
| - app
| | - Controller
| | - View
| | - Model
| | - webroot
| | | - Miniproject
| | | | - index.html [Mini react project]

我已经尝试安装React Transform Boilerplate。但它使用 Web 开发服务器（并在 localhost:3000 上呈现文件）。但我想要从运行我的 CakePHP 项目的 nginx 服务器呈现的文件。

当我访问 url (Project/Miniproject/index.html) 时，它找不到 dist/bundle.js，因为它在内存中。那么如何使用 webpack 在 CakePHP webroot 中设置 React？

【问题讨论】：

github.com/gaearon/react-transform-boilerplate/blob/master/… npm run build
@azium 但是我需要在每次小改动后运行这个命令。这会不会减慢我的开发速度？
webpack 有一个监视标志 webpack.github.io/docs/tutorials/getting-started/#watch-mode 但我认为你不能同时混合开发服务器 + 热重载和从 nginx 服务。
说实话，让你的 react 前端与你的 cakephp 后端完全分开可能会更好。不确定按照您想要的方式设置会获得什么好处。
@azium 我正在使用这种方法，因为我可以使用 cake php session

标签： cakephp nginx reactjs

【解决方案1】：

我建议查看https://github.com/brawlins/react-webpack-php-starter。

您仍然可以通过 BrowserSync 让 Webpack 运行开发服务器，并且您将使用代理选项重新加载您的 apache 虚拟主机。（不必使用 webpack-dev-server ）

例如在你的 webpack.config.js 中

plugins: [

        // reloads browser when the watched files change
        new BrowserSyncPlugin({
            // use existing Apache virtual host
            proxy: 'http://localhost:80/',
            tunnel: false,
            // watch the built files and the index file
            files: ['public/assets/*', './index.php', './api/*.php']
        }),

希望这是有道理的。挖掘我链接的 repo 中的代码并尝试一下。一旦你了解了@brawlins 如何设置他的项目。你应该可以调整它或从头开始你的 webpack 配置。

请记住，没有一个正确的答案，您只需要尝试您可以理解并为您工作的方法。一旦你到达一堵砖墙，你就出去探索。但我觉得你已经知道了:)

祝你好运！

附言我同意@azium，最好尽可能保持前端和后端分开

【讨论】：