Question

我搜索了互联网，没有找到我正在努力实现的完整解决方案。我想：

将反应相关模块添加到现有的Laravel项目中。
使用现有的gulp文件，使所有与反应相关的代码可用于我的Laravel刀片布局。
然后将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...)
});

我尝试过以下不同的教程： this tutorial和this one

或多或少建议我使用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"
  }
}

现在已经安装了与响应相关的依赖项，我已经更改了我的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

<强>解决

它最终适用于我所拥有的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

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

反应js和现有的Laravel项目

1 个答案: