未捕获的引用错误:未定义完整日历(Webpack/NPM)

Question

当我加载页面时，日历不起作用，在我的控制台上我有：

jQuery.Deferred exception: FullCalendar is not defined ReferenceError: FullCalendar is not defined
at HTMLDocument.<anonymous> (http://admin.test/agenda:279:20)
at mightThrow (http://admin.test/js/admin.js:30047:29)
at process (http://admin.test/js/admin.js:30115:12) undefined
admin.js:30340 Uncaught ReferenceError: FullCalendar is not defined
at HTMLDocument.<anonymous> (agenda:279)
at mightThrow (admin.js:30047)
at process (admin.js:30115)

---

1(我有一个带有"AdminLTE 3.0.5"的拉拉维尔项目。

Package.json ：

"devDependencies": {
"@fullcalendar/bootstrap": "^4.4.0",
"@fullcalendar/core": "^4.4.0",
"@fullcalendar/daygrid": "^4.4.0",
"@fullcalendar/interaction": "^4.4.0",
"@fullcalendar/timegrid": "^4.4.0",
"admin-lte": "^3.0.5",
"axios": "^0.19",
"bootstrap": "^4.4.1",
"jquery": "^3.4.1",
"jquery-ui": "^1.12.1",
"laravel-mix": "^5.0.1",
"lodash": "^4.17.13",
"popper.js": "^1.12",
"resolve-url-loader": "^2.3.1",
"sass": "^1.20.1",
"sass-loader": "^8.0.0",
"vue": "^2.5.17",
"vue-template-compiler": "^2.6.10"
},

---

2(我用我的网络包导入完整日历包：

mix.js('resources/js/app.js', 'public/js/app.js')
.js('resources/js/calendar.js', 'public/js/calendar.js')

应用程序.js ：

require('./bootstrap');
window.Vue = require('vue');
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
const app = new Vue({
el: '#app',
});
require('jquery-ui/ui/widgets/draggable');
require('admin-lte');
/* Table */
require('../../node_modules/admin-lte/plugins/datatables/jquery.dataTables.min.js');
require('../../node_modules/admin-lte/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js');
require('../../node_modules/admin-lte/plugins/datatables-responsive/js/dataTables.responsive.min.js');
require('../../node_modules/admin-lte/plugins/datatables-responsive/js/responsive.bootstrap4.min.js');
require('../../node_modules/admin-lte/plugins/bs-custom-file-input/bs-custom-file-input.min.js');

日历.js ：

/* Calendar */
require('@fullcalendar/core');
require('@fullcalendar/daygrid');
require('@fullcalendar/timegrid');
require('@fullcalendar/interaction');
require('@fullcalendar/bootstrap');

---

3( 在我的 vue 上，我复制/过去了 AdminLTE3 日历页面，并且只在以下之前添加我的 2 个混音文件：

<script src="{{ mix('js/app.js') }}"></script> 
<script src="{{ mix('js/calendar.js') }}"></script> 
<script>
$(function () {
/* initialize the external events
-----------------------------------------------------------------*/
function ini_events(ele) {
ele.each(function () {
[...]

---

我使用"require(("函数调用所有js文件，当我运行">npm run dev"时，一切正常，没有错误。 我认为这是一个js文件顺序，但它与AdminLTE3日历页面的顺序相同...或者我是瞎子。 我更改了日历包的所有版本&jquery&jquery-ui，使其与此页面相同(我的dl版本为4.4.0(。

有人可以帮我吗？

Answer 1

我有解决方案。

在我的日历上导入这样的文件.js ：

/* Calendar */
import { Calendar } from '@fullcalendar/core';
import dayGrid from '@fullcalendar/daygrid';
import timeGrid from '@fullcalendar/timegrid';
import interaction, { Draggable } from '@fullcalendar/interaction';
import bootstrap from '@fullcalendar/bootstrap';

而且你不需要我的脚本上的这 2 行

<!--
var Calendar = FullCalendar.Calendar;
var Draggable = FullCalendarInteraction.Draggable;
-->