反应js和现有的Laravel项目 [英] react js and existing Laravel project

问题描述

我已经搜索了互联网，却找不到能为我要实现的目标提供完整解决方案的地方.我正在尝试:

I've searched internet and no where I've found a complete solution for what I'm trying to achieve. I'm trying to:

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

以下是现有 gulp.js 文件的结构:

Here's how the structure of the existing gulp.js file looks like:

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

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

I've tried to follow different tutorials like: this tutorial and this one

或多或少建议我使用 npm 更新反应相关的依赖项.我的 package.json 看起来像:

which more or less suggested me to update react related dependencies using npm, which I did. My package.json looks like:

{
  "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 文件，使其看起来如下所示:

Now that the react related dependencies are installed, I've changed my gulp.js file so that it looks like the following:

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

现在，我尝试通过以下方式进行编译:

Now I'm trying to compile this by:

gulp

这将引发以下两个错误，具体取决于我在gulp文件顶部包含的内容.如果我添加以下行:

Which throws two of the following errors depending on what I'm including on the top of the gulp file. If I include the line:

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)

所有这些尝试都是上述链接所建议的一种命中和审判方法.

All of these attempts were sort of hit and trial approaches as suggested by the above stated links.

有人知道逐步方法的确切方法吗?任何链接或资源.另外，如果有人可以纠正我可能在做错的事情.

Does anyone know a step by step method of exactly how this can be done? Any link or resource. Also if anyone can rectify what I might be doing wrong.

非常感谢您的帮助.

推荐答案

编辑2021

现在我在过去的3.5年中一直在与React合作，我相信我可以回答我自己的问题.实际上，问题(或方法)本身是错误的.

Now that I have been working with React over the last 3.5 years, I believe I can answer my own question. In fact the question (or approach) itself is wrong.

我应该已经使用Webpack捆绑了React代码.步骤如下-

I should have bundled React code using Webpack. Here are the steps -

1. 在Laravel目录中为React子项目创建一个文件夹，您可以根据需要组织它.

1. Create a folder for your React sub project inside the Laravel directory, you can organize it as you wish.

使用Webpack设置React(超出此编辑范围)，网络上有100多个教程.

Setup React with Webpack (out of scope for this edit), there are 100s of tutorials on net.

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

In development mode spin up dev server from Webpack. Typically localhost:8080. Front end will communicate to the Laravel base using API/Json bridge.

一旦对开发版本感到满意，请生成React代码的生产版本.这样会在您配置的路径中吐出JS捆绑软件，CSS捆绑软件和资产.

Once you are satisfied with the dev version, generate production version of the React code. This will spit out JS bundles, CSS bundles and assets in the path you configured.

将这些捆绑包拉入正常的Laravel模板中并繁荣-您运行的React应用程序的主要框架为Laravel.

Pull these bundles in your normal Laravel template and boom - you have your React app running with the main framework being Laravel.

已解决

它最终可以与我所使用的gulp.js版本一起使用:

It eventually worked with the version of gulp.js where I had:

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

这最初是引发错误，例如:

This was initially throwing error like:

ReferenceError: Elixir is not defined

我已将软件包 laravel-elixir 升级到6.0.x，这样现在package.json中的内容如下所示:

I upgraded the package laravel-elixir to 6.0.x, such that now it looks like the following in my package.json:

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

要生成包含React相关代码和组件的已编译JS文件，请在gulp文件中添加以下内容:

To produce a compiled JS file which includes React related code and your components, add something like the following to your gulp file:

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

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

Please note I kept the source JS file name as comp1.js which had my react component code. I'll experiment soon to see if they could have different names.

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

Compile from the root of the project using gulp. This will generate your compiled file, which when included in your blade layout or view will let you render your component in your Laravel page.

然后我们就可以在Laravel中使用React.

And there we go, I now have a way to use React inside Laravel.

注释

我的npm版本是:

3.10.10

节点版本为:

6.12.0

添加此内容是因为当这些版本不同时，尤其是在节点不是LTS的情况下，我在更新软件包时遇到了问题.希望这会有所帮助.

Add this because I had issues updating packages when those versions were different, particularly when node was not LTS. Hope this helps.

这篇关于反应js和现有的Laravel项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！