Question

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

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

谈到开发部分，我有点困惑。我真的喜欢反应热重装，但现在我不得不做一点走动才能使这个工作。

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

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

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

@UPDATE

我觉得我找到了一个可以接受的解决方案。我会坚持使用我在问题中提供的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();
});

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

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输出配置自动捆绑脚本标记注入，以及添加到脚本标记网址的自动缓存突发文件哈希。

使用react.js和后端，您的工作流程如何？

1 个答案: