通过编译资产（Mix）在Laravel项目中提供FullCalendar支持

Question

我正在尝试将FullCalendar添加到我的Laravel项目中。当我从CDN直接将.js加载到刀片服务器时，一切正常，但是我想将它们编译到vendor.js中，并且不起作用。

我的app.js在下面

import '../bootstrap';
import '../plugins';
import '@fullcalendar/core/main.min';
import '@fullcalendar/daygrid/main.min';
import '@fullcalendar/interaction/main.min';
import '@fullcalendar/timegrid/main.min';
import '@fullcalendar/moment/main.min';
import '@fullcalendar/moment-timezone/main.min';

我的webpack.mix.js有以下几行

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

mix.setPublicPath('public')
    .setResourceRoot('../') // Turns assets paths in css relative to css file
    // .options({
    //     processCssUrls: false,
    // })
    .sass('resources/sass/frontend/app.scss', 'css/frontend.css')
    .sass('resources/sass/backend/app.scss', 'css/backend.css')
    .js('resources/js/frontend/app.js', 'js/frontend.js')
    .js([
        'resources/js/backend/before.js',
        'resources/js/backend/app.js',
        'resources/js/backend/after.js'
    ], 'js/backend.js')
    .extract([
        // Extract packages from node_modules to vendor.js
        'jquery',
        'bootstrap',
        'popper.js',
        'axios',
        'sweetalert2',
        'lodash',
        '@fullcalendar/core',
        '@fullcalendar/daygrid',
        '@fullcalendar/interaction',
        '@fullcalendar/timegrid',
        '@fullcalendar/moment',
        '@fullcalendar/moment-timezone'
    ])
    .sourceMaps();

if (mix.inProduction()) {
    mix.version()
        .options({
            // Optimize JS minification process
            terser: {
                cache: true,
                parallel: true,
                sourceMap: true
            }
        });
} else {
    // Uses inline source-maps on development
    mix.webpackConfig({
        devtool: 'inline-source-map'
    });
}

在我的layout.blade我有

<!-- Scripts -->
@stack('before-scripts')
{!! script(mix('js/manifest.js')) !!}
{!! script(mix('js/vendor.js')) !!}
{!! script(mix('js/frontend.js')) !!}
@stack('after-scripts')

最后进入calendar.blade

我有以下几行。

...
...
...
<div id='calendar'></div>
...
...
...

@push('after-scripts')
    <script>

        document.addEventListener('DOMContentLoaded', function() {
            var calendarEl = document.getElementById('calendar');

            var calendar = new FullCalendar.Calendar(calendarEl, {
                plugins: [ 'dayGrid' ]
            });

            calendar.render();
        });

    </script>
@endpush

在Chrome控制台中出现以下错误

Uncaught ReferenceError: FullCalendar is not defined
    at HTMLDocument.<anonymous> (7:195)