Laravel mixコンパイル - クラスが見つかりません

Question

Laravel 5.3から5.4に移動した後、私はwebpackに移行しています。

は、しかしそれは罰金コンパイルページをロードする際には、常に示し

app.a711192 ...の.js：125キャッチされないにReferenceError：レイアウトのHTMLDocumentで が定義されていません。 Function.ready（vendor.a711192 ... .js：125） のi（vendor.19cd2ff ... .js：2） で、Object.fireWith [as resolveWith]（vendor.19cd2ff ... .js：2） にあります。 19cd2ff ...の.js：HTMLDocument.Jで2） （vendor.19cd2ff ...の.js：2）

私が貼り付けられているが、それはLayoutとしてコンパイルされたかのように見える、コンパイルapp.jsをビニングしかし、そこにあるIなぜそれが正しく読み込まれていないのか分からない。

webpack.mix.js

const { mix } = require('laravel-mix'); 

/* 
|-------------------------------------------------------------------------- 
| Mix Asset Management 
|-------------------------------------------------------------------------- 
| 
| Mix provides a clean, fluent API for defining some Webpack build steps 
| for your Laravel application. By default, we are compiling the Sass 
| file for the application as well as bundling up all the JS files. 
| 
*/ 
let npmFolder = './node_modules/'; 
mix.disableNotifications() 
    .js('resources/assets/js/app.js', 'public/js') 
    .scripts([ 
     npmFolder + 'jquery/dist/jquery.min.js', 
     npmFolder + 'jquery-migrate/dist/jquery-migrate.min.js', 
     npmFolder + 'bootstrap-sass/assets/javascripts/bootstrap.min.js', 
     npmFolder + 'axios/dist/axios.min.js' 
    ], 'public/js/vendor.js') 
    .sass('resources/assets/sass/app.scss', 'public/css') 
    .sass('resources/assets/sass/admin/admin.scss', 'public/css') 
    .version() 
; 

app.js

require('./layout.js'); 
require('./main.js'); 

main.js

$(function() 
{ 
    let instance = axios.create({ 
     baseURL: 'https://some-domain.com/api/', 
     timeout: 1000, 
     headers: {'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')} 
    }); 

    let layout = new Layout(); 

    $("button[data-layout-action]").click(function(e) 
    { 
     let action = $(this).attr('data-layout-action'); 

     console.log(action); 

     switch(action) 
     { 
      case 'new-page': 
       layout.newPage(); 
       break; 
      case 'edit-page': 
       layout.editPage(); 
       break; 
      default: 
       alert('Invalid layout action ' + action) 
     } 
    }); 
}); 

layout.js

class Layout { 
    constructor() { 

    } 

    newPage() { 
     this.loadPage({}); 
    } 

    editPage() { 

    } 

    loadPage(layout) { 
     axios.post('/layout/generate', { 
      layout 
     }) 
      .catch(error => { 
       alert(error); 
      }) 
    } 
} 

Answer 1

私は最終的に続いてapp.js

import * as _layout from './Layout'; 

const Layout = new _layout(); 

Answer 2

私が使用していないので、私は錆びたんだけど、あなたのように感じている長い時間の中で必要と使用は間違っています。

いくつかの提案..

1. ..私はあなたが値として必要格納する必要があり感覚を得る、内側その後も

2. をmain.js require('./layout.js')を試してみてくださいので、私の最初の提案が失敗した場合、試してください：それは物事が今行われている方法ですので、代わりにnew Layout();

3. のlet layout = require('./layout.js');をそれらが失敗（またはしない）場合は、importsを行う方法をよく読んで。