Question

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

它编译得很好但是在加载页面时总是会显示

app.a711192 ... .js：125未捕获的ReferenceError：未定义布局在HTMLDocument。（app.a711192 ... .js文件：125） at i（vendor.19cd2ff ... .js：2） at 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

我终于通过在Layout.js

中加入以下内容来解决这个问题

module.exports = Layout;

然后加入app.js

import * as _layout from './Layout';

const Layout = new _layout();

Answer 2

我很长时间没有使用过需要，所以我生锈了，但觉得你的使用需要错误。

很少有建议......

在main.js

require('./layout.js')

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

Laravel mix编译 - 没有找到类

2 个答案: