如何为两个 React 项目使用一个 Laravel 实例答案

【问题标题】：How to use one Laravel instance for two React projects如何为两个 React 项目使用一个 Laravel 实例
【发布时间】：2017-10-03 16:08:03
【问题描述】：

我有两个由 create-react-app 套件创建的 react 项目，都将使用相同的数据库和一些共享模型。对于后端，我创建了一个 Laravel 项目，并在它的公共目录中放置了 React 项目：

--Laravel project
 |-- app
 |-- bootstarp
 ...
 |-- public
   |-- frontend (react app)
   |-- panel (react app)
   |-- index.php (Laravel's index)
 ...
 |-- vendor
 |-- .env

由于我打算将 Laravel 仅用于 REST api，因此我设置了 3 个域，例如：

frontend.local
panel.frontend.local
api.frontend.local

这样做的原因是我不想为每个项目重新创建数据库或共享模型，现在一切都很好。我可以访问项目，也可以发送 api 请求。所以我的问题是：这种方法好吗？如果不是，我怎样才能为两个反应应用提供一个 Laravel 应用实例。

【问题讨论】：

你为什么不用Laravel Mix 只编译两个react项目？或者只保留两个单独的 CRA 实例。
老实说，我是 Laravel 的新手，只要我知道 react mix 的语法类似于 mix.react('app.jsx', 'public/js')，但我的 react 项目没有 app.jsx 并且组件在 @ 中被分块成几个 js 文件987654327@.这样做的原因是只在用户访问应用程序时获取所需的组件。所以我想如果我使用mix，它会再次将它们全部放入一个文件中，对吗？
您可以混合和导出多个文件。您只需要指定每个文件的入口点，因为这是让您的 Web 应用程序在未来可扩展的最佳方式。您是否研究过 webpack 代码拆分？ @Armin
@Win 我现在拥有的是mix.react('resources/assets/js/app.js', 'public')，在app.js 我有require('./bootstrap'); require('./src/main.8707543e'); 这个/main.8707543e 是我的入口点，并在需要时加载其他块。所有其他静态文件（块）都在public/static/ 中。现在一切正常，但我不确定我是否做得正确。对于代码拆分，我使用github.com/thejameskyle/react-loadable 让我的应用按需加载组件。

标签： php reactjs laravel-5 laravel-5.5

【解决方案1】：

它可能来晚了，但我希望我能按照这个过程解决它。

为每个域创建一个 blabe 视图。即（frontend.blade.php，panel.blabe.php）在您的视图文件夹中。
cd 到你的 laravel 包中的资源文件夹，并使用 npx create-react-app panel 为面板执行新的 react 安装，并使用 laravel 命令对 php artisan ui react 作出反应。有了这个，我们现在在一个 laravel 中有两个反应应用程序。您的资源文件夹现在应该有一个 js 文件夹和一个面板文件夹。
转到您的公共目录并分别创建两个文件夹 frontend 和 panel
到你的 laravel 根目录下的 webpack.mix.js 文件，添加这行代码mix.react('resources/js/app.js', 'public/frontend/js') .react('resources/panel/src/index.js', 'public/panel/js') .sourceMaps();
现在回到您的刀片模板并将每个 javascript 调用到正文中，即

    <body>
        <div id="root"></div>
        <script src="{{ asset('panel/js/app.js') }}"></script>
    </body>

对于面板，并且

    <body>
        <div id="root"></div>
        <script src="{{ asset('frontend/js/app.js') }}"></script>
    </body>

用于前端。

最后使用每个独立的路由返回每个视图页面并运行npm run watch。您可以使用 laravel mix 文档阅读更多内容。

【讨论】：