Laravel 混合编译 - class 未找到

Question

从 Laravel 5.3 迁移到 5.4 后，我正在努力迁移到 webpack。

编译正常，但加载页面时总是显示

app.a711192….js:125 未捕获的引用错误：未定义布局在 HTML 文档。 (app.a711192….js:125) 在我 (vendor.19cd2ff….js:2) 在 Object.fireWith [as resolveWith] (vendor.19cd2ff….js:2) 在 Function.ready（vendor.19cd2ff….js:2）在 HTMLDocument.J (vendor.19cd2ff….js:2)

我已经粘贴了已编译的 app.js，它看起来好像正在编译，因为 Layout 在那里，但是我不确定为什么它没有正确加载它。

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

好久没用require了，生疏了，感觉你require用错了

很少有建议..

在 main.js

require('./layout.js')

即便如此，我还是觉得您需要将 require 存储为一个值。所以如果我的第一个建议失败了，请尝试：let layout = require('./layout.js'); 而不是 new Layout();
如果失败（或失败），请继续阅读如何做 imports，因为这就是现在的做法。

Answer 2

我终于通过将以下内容添加到 Layout.js

中解决了这个问题

module.exports = Layout;

然后加入app.js

import * as _layout from './Layout';

const Layout = new _layout();

Laravel 混合编译 - class 未找到

Laravel mix compile - class not found

javascript

npm

laravel

laravel-mix