反应 js 和现有的 Laravel 项目

Question

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

1. 将 react 相关模块添加到现有的 Laravel 项目中。
2. 使用现有的 gulp 文件使所有与响应相关的代码可用于我的 Laravel 刀片布局。
3. 然后将 JSX 代码放到我的 Laravel 的公共文件夹中，并在刀片模板中使用这些组件。

现有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...)
});

我尝试遵循不同的教程，例如： 本教程和本教程

这或多或少建议我使用npm更新反应相关的依赖项，我做到了。 我的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)

正如上述链接所建议的那样，所有这些尝试都是一种命中和试验方法。

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

任何帮助是极大的赞赏。

Answer 1

编辑 2021

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

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

1. 在 Laravel 目录下为你的 React 子项目创建一个文件夹，你可以随意组织它。

2. 使用 Webpack 设置 React（超出此编辑的范围），网上有 100 多个教程。

3. 在开发模式下，从 Webpack 启动开发服务器。 通常localhost:8080 。 前端将使用 API/Json 桥接器与 Laravel 基础进行通信。

4. 一旦您对开发版本感到满意，请生成 React 代码的生产版本。 这将在您配置的路径中吐出 JS 包、CSS 包和资产。

5. 将这些包拉到你的普通 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 ，其中包含我的反应组件代码。 我很快就会试验一下，看看它们是否可以有不同的名字。

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

好了，现在我有了在 Laravel 中使用 React 的方法。

笔记

我的 npm 版本是：

3.10.10

节点版本是：

6.12.0

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