Laravel mix kompilieren - Klasse nicht gefunden

Question

Nachdem ich von Laravel 5.3 zu 5.4 gewechselt bin, arbeite ich an der Umstellung auf Webpack.

Es kompiliert jedoch gut, wenn die Seite es zeigt immer

app.a711192 ... Js Laden bis: 125 Uncaught Reference: Layout ist nicht bei Htmldocument definiert. (app.a711192 ... .js: 125) bei i (vendor.19cd2ff ... .js: 2) bei Object.fireWith [als resolveWith] (vendor.19cd2ff ... .js: 2) bei Function.ready (vendor. 19cd2ff ... Js: 2) bei HTMLDocument.J (vendor.19cd2ff ... Js: 2)

ich eingefügt haben binned die kompilierten app.js, es sieht aus, als ob es als Layout kompiliert es ist aber ich Ich bin mir nicht sicher, warum es nicht richtig geladen wird.

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

ich es endlich geschafft, dies in Layout.js, indem Sie das folgende, um herauszufinden,

module.exports = Layout; 

Dann in app.js durch Zugabe

import * as _layout from './Layout'; 

const Layout = new _layout(); 

Answer 2

Ich habe erfordern nicht in eine lange Zeit verwendet, so rostig ich bin, aber ich fühle mich wie du bist Verwendung erfordert falsch.

paar Vorschläge ..

1. Versuchen require('./layout.js') innen main.js

2. Selbst dann, ich habe das Gefühl, Sie brauchen das als Wert benötigen zu speichern .. also wenn mein erster Vorschlag scheitert , versuchen: let layout = require('./layout.js'); statt new Layout();

3. Wenn diese nicht (oder nicht), lesen Sie auf, wie imports zu tun, denn das ist, wie die Dinge jetzt fertig sind.