reagieren js und bestehenden Laravel-Projekt

Question

Ich habe im Internet gesucht und keine, wo ich eine vollständige Lösung für das, was ich zu erreichen versuche, gefunden habe. Ich versuche Folgendes:

1. Fügen Sie dem Laravel-Projekt reaktionsbezogene Module hinzu.
2. Verwenden Sie die vorhandene Schluckdatei, um alle zugehörigen Codes für meine Laravel-Blade-Layouts verfügbar zu machen.
3. Dann legen Sie JSX-Code in den öffentlichen Ordner meines Laravel und verwenden Sie diese Komponenten in den Blade-Vorlagen.

Hier ist, wie die Struktur der bestehenden gulp.js Datei wie folgt aussieht:

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

Ich habe versucht, wie verschiedene Übungen zu folgen: this tutorial und this one

, die mehr oder weniger vorgeschlagen, mich zu Aktualisieren Sie reaktionsbezogene Abhängigkeiten mit npm, was ich getan habe. Mein package.json wie folgt aussieht:

{ 
    "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" 
    } 
} 

Nun, da die reagieren Abhängigkeiten installiert sind, ich habe so meine gulp.js Datei geändert wird, dass es wie folgt aussieht:

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

Jetzt versuche ich zu kompilieren dies von:

gulp 

welche zwei der folgenden Fehler wirft je nachdem, was ich auf der Spitze der großen Schluck Datei bin auch. Wenn ich Sie folgende Zeile:

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

Dort heißt es:

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) 

Wenn ich folgende Zeile:

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

Dort heißt es:

/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) 

Alle diese Versuche Es gab eine Art Hit und Versuch Ansätze wie vorgeschlagen durch die oben genannten Links.

Kennt jemand eine Schritt für Schritt Methode genau, wie dies getan werden kann? Jeder Link oder jede Ressource. Auch wenn jemand korrigieren kann, was ich falsch mache.

Jede Hilfe wird sehr geschätzt.

Answer 1

GELöST

Es schließlich mit der Version von schluck gearbeitet.js, wo ich hatte:

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

Dies wurde zunächst werfen Fehler wie:

ReferenceError: Elixir is not defined 

ich das Paket aufgerüstet laravel-elixir 6.0.x, so dass jetzt sieht es wie folgt in meinem package.json:

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

um eine kompilierte JS-Datei zu erzeugen, die so etwas wie die folgend in der Datei schluck Reagieren zugehörigen Code und Ihre Komponenten enthalten, fügt:

012.351.

Bitte beachten Sie, dass ich den Quell-JS-Dateinamen als comp1.js behalten habe, der meinen Code für die reaktive Komponente hatte. Ich werde bald experimentieren, um zu sehen, ob sie verschiedene Namen haben könnten.

Kompilieren Sie aus dem Stamm des Projekts mit gulp. Dadurch wird Ihre kompilierte Datei erstellt, die, wenn sie in Ihrem Blade-Layout oder in Ihrer Ansicht enthalten ist, das Rendern Ihrer Komponente auf Ihrer Laravel-Seite ermöglicht.

Und da gehen wir, ich habe jetzt eine Möglichkeit, Reagieren in Laravel zu verwenden.

Hinweise

Meine npm Version ist:

3.10.10 

Und Knoten Version ist:

6.12.0 

diese hinzufügen, weil ich Probleme Pakete aktualisieren hatte, als diese Versionen unterschiedlich waren, vor allem wenn Knoten nicht LTS war. Hoffe das hilft.