(. .)美元.fullCalendar不是一个函数——Webpack

Question

当我尝试加载日历时，webpack编译器似乎不识别正在使用的jquery ?我遵循基本使用指南

我想因为完整日历已经捆绑了jquery，所以我不需要调用它。

在我的app.js中，我通过

调用fullCalendar

import fullCalendar from 'fullCalendar';
const calendar = document.getElementById('calendar');
$(calendar).fullCalendar();

我知道我做错了什么，我无法在完整的日历文档中找到任何导入方法。

Answer 1

1)通过npm (npm install fullcalendar --save-dev)安装

在webpack.config.js中有如下的

module.exports = {
    entry: [
        'fullcalendar',
        ...
   ]
}

在你的javascript

require("fullcalendar"); //maybe import works as well
$calendar.fullCalendar();

Answer 2

使用webpack 5。下面的代码解决了我的问题，

module: {
        rules: [
            {
                test: require.resolve('jquery'),
                    loader: 'expose-loader',
                    options:  { 
                        exposes: ["$", "jQuery"]
                    }
            },
            {
                test: require.resolve('moment'),
                    loader: 'expose-loader',
                    options:  { 
                        exposes: "moment"
                    }
            },
            {
                test: require.resolve('fullcalendar'),
                use: [
                    {
                      loader: 'script-loader',
                      options: 'fullcalendar/dist/fullcalendar.js'
                    }
                  ]
            },
            {
                test: require.resolve('fullcalendar-scheduler'),
                use: [
                    {
                      loader: 'script-loader',
                      options: 'fullcalendar/dist/fullcalendar-scheduler.js'
                    }
                  ]
            },
        ]
    }