未定义FullCalendar。Laravel 8完整日历计划程序版本5.6 es6

未捕获引用错误：未定义完整日历 npm安装。如果我在日历刀片中使用cdn源。日历将正确显示。然而，我改为npm安装，我被卡住了

编写器安装 npm i npm运行开发

webpack.mix.js

let mix = require("laravel-mix");
let productionSourceMaps = false;

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

mix.sass('resources/sass/app.scss', 'public/css')
.sourceMaps()
if (mix.inProduction()) {
    mix.version();
}

import 'jquery';
require('./bootstrap');
import 'moment';
import 'fullcalendar-scheduler';

@import "~bootstrap/dist/css/bootstrap.css";
@import "~fullcalendar-scheduler/main.css";
@import "~bootstrap-select/dist/css/bootstrap-select.min.css";
@import "~shop-item/dist/bootstrap/css/bootstrap.css";
@import "~font-awesome/css/font-awesome.css";
@import "variables";

let mix = require("laravel-mix");
mix
  .js("resources/js/app.js", "public/js")
  .sass("resources/sass/app.scss", "public/css");

app.js

let mix = require("laravel-mix");
let productionSourceMaps = false;

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

mix.sass('resources/sass/app.scss', 'public/css')
.sourceMaps()
if (mix.inProduction()) {
    mix.version();
}

import 'jquery';
require('./bootstrap');
import 'moment';
import 'fullcalendar-scheduler';

@import "~bootstrap/dist/css/bootstrap.css";
@import "~fullcalendar-scheduler/main.css";
@import "~bootstrap-select/dist/css/bootstrap-select.min.css";
@import "~shop-item/dist/bootstrap/css/bootstrap.css";
@import "~font-awesome/css/font-awesome.css";
@import "variables";

let mix = require("laravel-mix");
mix
  .js("resources/js/app.js", "public/js")
  .sass("resources/sass/app.scss", "public/css");

app.scss

let mix = require("laravel-mix");
let productionSourceMaps = false;

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

mix.sass('resources/sass/app.scss', 'public/css')
.sourceMaps()
if (mix.inProduction()) {
    mix.version();
}

import 'jquery';
require('./bootstrap');
import 'moment';
import 'fullcalendar-scheduler';

@import "~bootstrap/dist/css/bootstrap.css";
@import "~fullcalendar-scheduler/main.css";
@import "~bootstrap-select/dist/css/bootstrap-select.min.css";
@import "~shop-item/dist/bootstrap/css/bootstrap.css";
@import "~font-awesome/css/font-awesome.css";
@import "variables";

let mix = require("laravel-mix");
mix
  .js("resources/js/app.js", "public/js")
  .sass("resources/sass/app.scss", "public/css");

package.json

{
    "private": true,
    "scripts": {
        "dev": "mix",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "axios": "^0.21.1",
        "css-loader": "^5.2.1",
        "laravel-mix": "^6.0.16",
        "lodash": "^4.17.21",
        "postcss": "^8.2.10",
        "resolve-url-loader": "^3.1.2",
        "sass": "^1.32.10",
        "sass-loader": "^11.0.1"
    },
    "dependencies": {
        "autoprefixer": "^10.2.5",
        "bootstrap": "^4.5.3",
        "bootstrap-datetimepicker": "0.0.7",
        "bootstrap-select": "^1.13.18",
        "chartjs": "^0.3.24",
        "datatables.net": "^1.10.24",
        "font-awesome": "^4.7.0",
        "fullcalendar-scheduler": "5.6.0",
        "jquery": "^3.6.0",
        "moment": "^2.29.1",
        "popper.js": "^1.16.1",
        "style-loader": "^2.0.0",
        "waypoints": "^4.0.1",
        "webpack": "^5.35.0",
        "webpack-cli": "^4.6.0"
    }
}

{
  "private": true,
  "scripts": {
    "dev": "mix && npm run build",
    "development": "mix",
    "watch-poll": "mix watch -- --watch-options-poll=1000",
    "hot": "mix watch --hot",
    "prod": "npm run production",
    "production": "mix --production",
    "build": "webpack",
    "watch": "webpack --watch",
    "clean": "rm -rf dist"
  },
  "devDependencies": {
    "css-loader": "^4.3.0",
    "laravel-mix": "^6.0.18",
    "mini-css-extract-plugin": "^1.2.0",
    "resolve-url-loader": "^3.1.2",
    "sass": "^1.32.11",
    "sass-loader": "^11.0.1",
    "webpack": "^5.3.0",
    "webpack-cli": "^4.1.0"
  },
  "dependencies": {
    "@fullcalendar/adaptive": "^5.6.0",
    "@fullcalendar/core": "^5.6.0",
    "@fullcalendar/daygrid": "^5.6.0",
    "@fullcalendar/interaction": "^5.6.0",
    "@fullcalendar/list": "^5.6.0",
    "@fullcalendar/resource-timeline": "^5.6.0",
    "@fullcalendar/timegrid": "^5.6.0",
    "autoprefixer": "^10.2.5",
    "bootstrap": "^4.6.0",
    "jquery": "^3.6.0",
    "webpack": "^5.35.0",
    "webpack-cli": "^4.6.0"
}

---

对于Webpack，在app.js中最好使用“require”而不是“import”

所以试试这个：

var力矩=要求的（‘力矩’）；

---

需要（'fullcalendar-scheduler'）

我终于。。。我只是学的还不够。。但是，希望这能帮助其他人。 我需要一个webpack.config.js和一个webpack.mix.js，并在package.json上做一些工作。以下是对我起作用的变化。而且，我无法让npm I fullcalendar scheduler在构建中工作。。我必须使用@fullcalendar

webpack.config.js

const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  mode: 'development',
  devtool: 'source-map',
  entry: './resources/fullcalendar/main.js',
  resolve: {
    extensions: [ '.js' ]
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: MiniCssExtractPlugin.loader },
          { loader: 'css-loader', options: { importLoaders: 1 } }
        ]
      }
    ]
  },
  output: {
    filename: 'main.js',
    path: path.join(__dirname, 'public/dist')
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'main.css'
    })
  ]
}

webpack.mix.js

let mix = require("laravel-mix");
let productionSourceMaps = false;

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

mix.sass('resources/sass/app.scss', 'public/css')
.sourceMaps()
if (mix.inProduction()) {
    mix.version();
}

import 'jquery';
require('./bootstrap');
import 'moment';
import 'fullcalendar-scheduler';

@import "~bootstrap/dist/css/bootstrap.css";
@import "~fullcalendar-scheduler/main.css";
@import "~bootstrap-select/dist/css/bootstrap-select.min.css";
@import "~shop-item/dist/bootstrap/css/bootstrap.css";
@import "~font-awesome/css/font-awesome.css";
@import "variables";

let mix = require("laravel-mix");
mix
  .js("resources/js/app.js", "public/js")
  .sass("resources/sass/app.scss", "public/css");

package.json

{
    "private": true,
    "scripts": {
        "dev": "mix",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "axios": "^0.21.1",
        "css-loader": "^5.2.1",
        "laravel-mix": "^6.0.16",
        "lodash": "^4.17.21",
        "postcss": "^8.2.10",
        "resolve-url-loader": "^3.1.2",
        "sass": "^1.32.10",
        "sass-loader": "^11.0.1"
    },
    "dependencies": {
        "autoprefixer": "^10.2.5",
        "bootstrap": "^4.5.3",
        "bootstrap-datetimepicker": "0.0.7",
        "bootstrap-select": "^1.13.18",
        "chartjs": "^0.3.24",
        "datatables.net": "^1.10.24",
        "font-awesome": "^4.7.0",
        "fullcalendar-scheduler": "5.6.0",
        "jquery": "^3.6.0",
        "moment": "^2.29.1",
        "popper.js": "^1.16.1",
        "style-loader": "^2.0.0",
        "waypoints": "^4.0.1",
        "webpack": "^5.35.0",
        "webpack-cli": "^4.6.0"
    }
}

{
  "private": true,
  "scripts": {
    "dev": "mix && npm run build",
    "development": "mix",
    "watch-poll": "mix watch -- --watch-options-poll=1000",
    "hot": "mix watch --hot",
    "prod": "npm run production",
    "production": "mix --production",
    "build": "webpack",
    "watch": "webpack --watch",
    "clean": "rm -rf dist"
  },
  "devDependencies": {
    "css-loader": "^4.3.0",
    "laravel-mix": "^6.0.18",
    "mini-css-extract-plugin": "^1.2.0",
    "resolve-url-loader": "^3.1.2",
    "sass": "^1.32.11",
    "sass-loader": "^11.0.1",
    "webpack": "^5.3.0",
    "webpack-cli": "^4.1.0"
  },
  "dependencies": {
    "@fullcalendar/adaptive": "^5.6.0",
    "@fullcalendar/core": "^5.6.0",
    "@fullcalendar/daygrid": "^5.6.0",
    "@fullcalendar/interaction": "^5.6.0",
    "@fullcalendar/list": "^5.6.0",
    "@fullcalendar/resource-timeline": "^5.6.0",
    "@fullcalendar/timegrid": "^5.6.0",
    "autoprefixer": "^10.2.5",
    "bootstrap": "^4.6.0",
    "jquery": "^3.6.0",
    "webpack": "^5.35.0",
    "webpack-cli": "^4.6.0"
}

---

仍然得到以下信息：ReferenceError:FullCalendar未在HTMLDocument中定义。）显示您的浏览器控制台