反應 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 時。 希望這會有所幫助。