$(...).fullCalendar 不是一个函数 - Webpack答案

【问题标题】：$(...).fullCalendar is not a function - Webpack$(...).fullCalendar 不是一个函数 - Webpack
【发布时间】：2016-12-19 17:52:03
【问题描述】：

当我尝试加载日历时，webpack 编译器似乎无法识别正在使用 jquery？我正在关注basic usage 指南

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

在我的 app.js 中，我通过调用 fullCalendar

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

$(calendar).fullCalendar();

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

【问题讨论】：

可能是你在纯javascript和jquery之间切换。您应该使用其中一种。尝试使用 $('#calendar') 创建日历
Justin 是对的，getElementById 返回一个 HTML DOM 元素，而 jQuery 的 $(...) 返回一个 jQuery 对象
@Justin 感谢您的回复。我切换到你的方法，我仍然导致同样的错误。
这能回答你的问题吗？ Use fullcalendar with webpack

标签： javascript jquery fullcalendar webpack

【解决方案1】：

使用 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'
                    }
                  ]
            },
        ]
    }

【讨论】：

【解决方案2】：

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

2) 在 webpack.config.js 中有以下内容

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

3) 在你的 javascript 中

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

【讨论】：