0

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

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

app.a711192….js:125 未捕获的 ReferenceError：布局未在 HTMLDocument 中定义。(app.a711192….js:125) 在 i (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()
;

应用程序.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)
        }
    });
});

布局.js

class Layout {
    constructor() {

    }

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

    editPage() {

    }

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

2 回答 2

1

我终于设法通过添加以下内容来解决这个问题Layout.js

module.exports = Layout;

然后通过添加到app.js 

import * as _layout from './Layout';

const Layout = new _layout();
于 2017-03-28T20:25:29.893 回答
0

我好久没用 require 了，生锈了，但是感觉你用 require 错了。

几个建议。。

  1. require('./layout.js')在 main.js 里面试试

  2. 即便如此，我觉得您需要将 require 存储为一个值。所以如果我的第一个建议失败，请尝试：let layout = require('./layout.js');而不是new Layout();

  3. 如果这些失败（或没有），请阅读如何做imports，因为这就是现在所做的事情。

于 2017-03-27T23:07:10.480 回答