React js 和现有 Laravel 项目

Question

我在互联网上进行了搜索，但没有找到我想要实现的目标的完整解决方案。我正在尝试：

将 React 相关模块添加到现有 Laravel 项目。
使用现有的 gulp 文件使所有 React 相关代码可用于我的 Laravel blade 布局。
然后将 JSX 代码放入我的 Laravel 的 public 文件夹并在 blade 模板中使用这些组件。

现有 gulp.js 文件的结构如下所示：

var elixir = require('laravel-elixir');

elixir(function (mix) {
    var cssFilesList = [
        ...
    ];

    var jsFooterFilesList = [
        ...
    ];

    var afterLoginjsFilesList = [
        ...
    ];

    elixir.config.assetsDir = 'custom/path';

    mix.styles(...);
    mix.scripts(...).scripts(more...);
    mix.version(...all of the above...)
});

我尝试遵循不同的教程，例如： this tutorial and this one

这或多或少建议我使用 npm 更新 React 相关的依赖项，我做到了。我的 package.json 看起来像：

{
  "private": true,
  "devDependencies": {
    "gulp": "^3.8.8"
  },
  "dependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "bootstrap-sass": "^3.0.0",
    "express": "^4.15.3",
    "ioredis": "^3.0.0",
    "laravel-elixir": "^2.0.0",
    "laravel-elixir-webpack-official": "^1.0.10",
    "laravel-elixir-webpack-react": "^1.0.1",
    "react": "^16.1.1",
    "react-dom": "^16.1.1",
    "require-dir": "^0.3.2",
    "socket.io": "^2.0.1"
  }
}

现在已经安装了与 React 相关的依赖项，我已经更改了我的 gulp.js 文件，使其看起来如下所示：

var elixir = require('laravel-elixir');
require('laravel-elixir-webpack-official');

// configure webpack
Elixir.webpack.mergeConfig({
    babel: {
        presets: [
            'react',
            'es2015',
            'stage-0',
        ]
    }
})

elixir(function (mix) {
    var cssFilesList = [
        ...
    ];

    var jsFooterFilesList = [
        ...
    ];

    var afterLoginjsFilesList = [
        ...
    ];

    elixir.config.assetsDir = 'custom/path';

    mix.webpack('reactcode.js');

    mix.styles(...);
    mix.scripts(...).scripts(more...);
    mix.version(...all of the above...)
});

现在我正在尝试通过以下方式编译它：

gulp

根据我在 gulp 文件顶部包含的内容，它会引发以下两个错误。如果我包含以下行：

require('laravel-elixir-webpack-official');

它说：

ReferenceError: Elixir is not defined
    at Object.<anonymous> (/path_to_project/node_modules/laravel-elixir-webpack-official/dist/WebpackTask.js:110:3)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/path_to_project/node_modules/laravel-elixir-webpack-official/dist/index.js:5:20)
    at Module._compile (module.js:570:32)

如果我包含以下行：

require('laravel-elixir-webpack-react');

它说：

/path_to_project/node_modules/laravel-elixir-webpack-react/main.js:3
Elixir.ready(function() {
       ^

TypeError: Elixir.ready is not a function
    at Object.<anonymous> (/path_to_project/node_modules/laravel-elixir-webpack-react/main.js:3:8)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/path_to_project/gulpfile.js:4:1)
    at Module._compile (module.js:570:32)

所有这些尝试都是按照上述 links 所建议的命中和试验方法。

有谁知道具体的分步方法吗？任何 link 或资源。另外，如果有人可以纠正我可能做错的事情。

非常感谢任何帮助。

Answer 1

编辑 2021

既然我在过去的 3.5 年里一直在使用 React，我相信我可以回答我自己的问题。其实问题（或方法）本身就是错误的。

我应该使用 Webpack 捆绑 React 代码。以下是步骤 -

在Laravel目录下为你的React子项目创建一个文件夹，你可以随意组织它。
使用 Webpack 设置 React（超出本次编辑范围），网上有 100 多篇教程。
在开发模式下，从 Webpack 启动开发服务器。通常 localhost:8080。前端将使用 API/Json 网桥与 Laravel 基地通信。
一旦您对开发版本感到满意，就生成 React 代码的生产版本。这将在您配置的路径中吐出 JS 包、CSS 包和资产。
将这些包拉入您的正常 Laravel 模板和繁荣 - 您的 React 应用程序运行主要框架是 Laravel.

已解决

它最终与我的 gulp.js 版本一起工作：

require('laravel-elixir-webpack-official');

最初抛出如下错误：

ReferenceError: Elixir is not defined

我将软件包 laravel-elixir 升级到 6.0.x，这样现在它在我的 package.json 中看起来像下面这样：

"laravel-elixir": "^6.0.0-0"

要生成包含 React 相关代码和您的组件的已编译 JS 文件，请将类似以下内容添加到您的 gulp 文件中：

mix.webpack('comp1.js', 'destination/to/public/directory', 'source/of/your/components/');

请注意，我将源 JS 文件名保留为 comp1.js，其中包含我的 React 组件代码。我将很快进行实验，看看它们是否可以使用不同的名称。

使用gulp 从项目的根目录开始编译。这将生成您的编译文件，当包含在您的 blade 布局或视图中时，您可以在 Laravel 页面中呈现您的组件。

好了，我现在有办法在内部使用 React Laravel。

备注

我的 npm 版本是：

3.10.10

节点版本为：

6.12.0

添加这个是因为当这些版本不同时我在更新包时遇到问题，特别是当节点不是 LTS 时。希望这有帮助。

React js 和现有 Laravel 项目

react js and existing Laravel project

javascript

laravel

reactjs

laravel-elixir