我使用 npm、webpack 和 FullCalendar，但在使用 fullcalendar 时，浏览器控制台出现以下错误:

main.js:37556 Uncaught TypeError: (0 , _jquery2.default)(...).fullCalendar is not a function

我该如何解决这个问题？

我使用 FullCalendar 3.0.0-beta 和 jquery 3.1.0。我的代码如下。

index.js:

import $ from 'jquery'
import jQueryUI from 'jquery-ui'
import moment from 'moment'
import fullCalendar from 'fullcalendar'


$('#timetable').fullCalendar({
    editable: true,
    firstDay: 1,
    droppable: true,
})

webpack.config.js:

var path = require("path")
var webpack = require("webpack")
var BundleTracker = require("webpack-bundle-tracker")

module.exports = {
    context: __dirname,
    entry: [
        'fullcalendar',
        './static/index',
    ],
    output: {
        path: path.resolve('./static/bundles/'),
        filename: "[name].js",
    },

    plugins: [
        new BundleTracker({filename: './webpack-stats.json'}),
    ],

    resolve: {
        modulesDirectories: ['node_modules'],
        extensions: ['', '.js'],
    },

    module: {
        loaders:[
            { test: /\.js$/, exclude: /node_modules/, loader: 'babel', query: { presets: ['es2015'] } }
        ]
    }

}

最佳答案

我知道我来晚了，但我想我还是会回答，以防有人在 Google 上搜索到它。

每当我遇到带有 Webpack 的 jQuery 插件(FullCalendar 是)时，我需要确保 jQuery 本身暴露在全局命名空间中，然后插件才能通过 require/import 工作。

我的 webpack.config.js:

var webpack = require("webpack")
var path = require("path")
var ExtractTextPlugin = require("extract-text-webpack-plugin")
var HtmlWebpackPlugin = require("html-webpack-plugin")

module.exports = {
    entry: {
        app: "./index.js",
        vendor: [
            "jquery",
            "moment",
            "fullcalendar"
        ]
    },
    output: {
        path: path.join(__dirname, '../../public'),
        publicPath: '/',
        filename: "scripts/app.[chunkhash].js"
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: ExtractTextPlugin.extract("style", ["css"]) },
            { test: require.resolve('jquery'), loader: 'expose?$!expose?jQuery' },
            { test: require.resolve('moment'), loader: 'expose?moment' }
        ]
    },
    resolve: {
      alias: {
        jquery: path.resolve(path.join(__dirname, '../..', 'node_modules', 'jquery')),
        fullcalendar: 'fullcalendar/dist/fullcalendar'
      }
    },
    plugins: [
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.CommonsChunkPlugin({ names: ["vendor"], filename: "scripts/[name].[chunkhash].js" }),
        new ExtractTextPlugin("styles/[name].[chunkhash].css"),
        new HtmlWebpackPlugin({
            template: "index.html.handlebars"
        }),
        new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/) 
    ]
};

相关部分是通过 loader: 'expose?$!expose?jQuery' 语法将 jquery 和 moment 强制置于全局命名空间中。

其次，因为 fullcalendar 的打包方式 require 无法自动获取它，所以我设置了一个别名，这样我就可以获得一个干净的包名。这是 alias: { fullcalendar: 'fullcalendar/dist/fullcalendar' } 位。

这两个让我可以通过 require/import 加载 fullcalendar 并像往常一样使用它。

还需要加载样式。对于这个我还没有创建别名，所以我只是做了一个到 css 文件的相对路径:

@import "../../../node_modules/fullcalendar/dist/fullcalendar.css";

您可以将 fullcalendar.js 替换为 fullcalendar.min.js 以避免重新压缩，但对于我的用例，因为我将所有 vendor JS 文件捆绑在一起，我我想如果我有更多的文件连接我会得到更好的压缩。 (同样适用于 CSS fullcalendar.css 和 fullcalendar.min.css)

免责声明:我不知道这是否是“正确”的做法，但我知道我对 webpack 进行了相当多的反复试验，才让 FullCalendar 和 Select2 等 jQuery 插件正常工作，并且这个 shell 和方法确实让它变得简单。

作为引用，链接到我使用此模式的公共(public)仓库中的相关文件:

webpack.config.js:https://github.com/thegrandpoobah/mftk-back-office/blob/e531de0a94130d6e9634ba5ab547a3e4d41c5c5f/app/src/public/webpack.config.js

样式 scss:https://github.com/thegrandpoobah/mftk-back-office/blob/e531de0a94130d6e9634ba5ab547a3e4d41c5c5f/app/src/public/styles/main.scss

我使用全日历的模块:https://github.com/thegrandpoobah/mftk-back-office/blob/e531de0a94130d6e9634ba5ab547a3e4d41c5c5f/app/src/public/students/index.js#L277

关于javascript - 将 fullcalendar 与 webpack 结合使用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39321399/