多模块动态导入

Question

我之前有过这段代码，它运行良好（仅在此处显示导入）：

import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';

我以为我可以动态加载它们，但我认为我做得不对。 我改成这样：

let calendarEl = document.getElementById('fullcalendar');

if(calendarEl) {
    Promise.all([
        import(/* webpackChunkName: 'fullcalendar-core' */ '@fullcalendar/core'),
        import(/* webpackChunkName: 'fullcalendar-daygrid' */ '@fullcalendar/daygrid')
    ])
    .then(([{Calendar}, dayGridPlugin]) => {
        let calendar = new Calendar(document.getElementById('fullcalendar'), {
            plugins: [dayGridPlugin]
        });
    
        calendar.render();    
    })
    .catch(console.warn);

我的日历没有加载，错误信息是： Cannot read properties of undefined (reading 'length') ，它指向let calendar = new Calendar行。

Answer 1

这个最后对我有用：

let calendarEl = document.getElementById('fullcalendar');

if(calendarEl) {
    (async () => {
        const {Calendar} = await import('@fullcalendar/core');
        const {default: dayGridPlugin} = await import('@fullcalendar/daygrid');

        let calendar = new Calendar(calendarEl, {
            plugins: [dayGridPlugin],
            initialView: 'dayGridMonth'
        });
        
        calendar.render();
    })();
}

Answer 2

import dayGridPlugin from …声明是默认导入。 所以你需要使用

.then(([{Calendar}, {default: dayGridPlugin}]) => {
    const calendar = new Calendar(document.getElementById('fullcalendar'), {
        plugins: [dayGridPlugin]
    });
    calendar.render();    
})