jsと既存のLaravelプロジェクトに反応します

Question

私はインターネットを検索しましたが、どこで達成しようとしているのか完全な解決策が見つかりませんでした。私はしようとしています：

1. 既存のLaravelプロジェクトに反応関連モジュールを追加します。
2. 既存のgulpファイルを使用して、すべての反応関連コードを自分のLaravelブレードレイアウトで使用できるようにします。
3. 次に、JSXコードをLaravelのパブリックフォルダに配置し、これらのコンポーネントをブレードテンプレートで使用します。

ここでは、既存のgulp.jsファイルの構造がどのように見えるかです：多かれ少なかれに私を提案し this tutorialとthis one

：私のような別のチュートリアルに従うことを試みた

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は、次のようになります。それは次のようになりますように、今すぐに反応関連の依存関係がインストールされていることを、私は私のgulp.jsファイルを変更した

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

：

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ファイルの先頭に何を含めるかによって次の2つのエラーがスローされます。

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

それは言う：私は行が含まれている場合

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) 

これらの試みのすべてを

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) 

私は行が含まれている場合提案されたヒットとトライアルのアプローチのようなものでした上記のリンクによって。

誰でもステップバイステップ方法を正確にどのように行うことができますか？任意のリンクまたはリソース。また、誰かが私が間違っているかもしれないものを是正することができれば。

ご協力いただきまして誠にありがとうございます。

Answer 1

は、それが最終的にグッのバージョンで働い

を解決しました。私が持っていたJS：私は私のpackage.jsonに次のように、今では見えるように、6.0.xのにパッケージlaravel-elixirをアップグレード

ReferenceError: Elixir is not defined 

：

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

これが最初のようなエラーを投げていました

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

あなたの一気ファイルに次のようなものを追加し、関連するコードや、あなたのコンポーネントに反応含んコンパイルJSファイルを生成するために：

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でないときお役に立てれば。