Поддержка FullCalendar в проекте Laravel через Компиляцию ресурсов (Mix) - PullRequest
Новая
       19

Поддержка FullCalendar в проекте Laravel через Компиляцию ресурсов (Mix)

0 голосов
/ 25 мая 2020

Я пытаюсь добавить FullCalendar в свой проект Laravel. Когда я загружаю. js прямо в blade-сервер из CDN, все работает, но я хочу скомпилировать их в vendor. js, и это не работает.

мое приложение. 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)
...