laravel - 您的使用react.js 和后端的工作流程是什么样的？

Question

我正在使用 Laravel 5.2 和 ReactJS 开发一个简单的 CRM 应用程序。以前我独立使用它们，但现在我想尝试将它们组合在一起，这样 Laravel 将成为我的 API，前端将全部在 ReactJS 中。

据我所知，当我的应用程序准备好上线时，我将提供我的主视图，其中包括 root div、bundle.js 等。

说到开发部分，我有点困惑。我真的很喜欢 React 热重载，但现在我必须四处走动才能使其正常工作。

我并排运行两台服务器。 Webpack-dev-server 和 homestead，因此我能够调用我的 API。但我还必须为 webpack-dev-server 提供额外的 index.html。当我在index.blade.php View 中更改某些内容时，我还需要在index.html中更改它，这有点痛苦。

有什么很酷的技巧可以用来改进我的工作流程吗？如果有任何示例，请给我一个链接，因为我找不到。有许多小型待办事项应用程序并不能真正解决我的问题。

PS。目前我正在使用这种方法 https://github.com/sexyoung/laravel-react-webpack

@更新

嗯，我想我已经找到了一个可以接受的解决方案。我将坚持使用我在问题中提供的 webpack 服务器配置(这真的很棒，因为你可以使用热重载+你的 api 调用被重定向到后端端口，所以你调用的不是 localhost:8080/api/user.../api/user/1)，但我还开发了一个简单的 Elixir 扩展，它将 php 编译为简单的静态 HTML 页面，解决了编辑两个索引文件的问题(我们都知道程序员很懒)。

var php2html = require("gulp-php2html");
var gulp = require("gulp");
var rename = require("gulp-rename");
var Task = elixir.Task;

elixir.extend("php2html", function (message) {
    new Task("php2html", function () {
        return gulp.src("./resources/views/index.blade.php")
            .pipe(php2html())
            .pipe(rename('index.html'))
            .pipe(gulp.dest("./"));
    })
    .watch("resources/views/index.blade.php");
});

elixir(function (mix) {
    mix.sass('app.scss');
    mix.php2html();
});

所以目前我有两个索引文件:

• 资源/ View 中的index.blade.php，由生产时的路由器解析

• index.html 位于我的应用程序文件夹的根目录中，由 webpack-dev-server 用于开发

当然，现在这些文件是同步的，因为 gulp watch :)

如果有更好的方法请告诉我。

Answer 1

我通常使用这个 webpack 插件解决这个问题(重复的 index.html/php 文件):https://github.com/ampedandwired/html-webpack-plugin

我认为这个想法与你的相反。您可以使用 HtmlWebpack 插件通过 filename 配置选项输出 index.tmpl.php 文件(或您需要的任何扩展名)，而不是将 php 文件编译为静态 html。通常我将该路径设置为应用程序服务器的模板文件夹。

我相信这种方法通常比相反的方法更容易。使用此插件还有其他好处，例如根据您的 Webpack 输出配置自动注入(inject)捆绑脚本标签，以及将自动缓存突发文件哈希添加到脚本标签 URL。