在webpack中使用fullcalendar

Question

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

}

Answer 1

我知道我在这里参加派对的时间有些晚了,但我想我无论如何都会回答,以防有人在谷歌上发表这件事.

每当我遇到带有Webpack的jQuery插件(FullCalendar是)时,我需要确保在插件通过require/import之前,jQuery本身会暴露给全局命名空间.

我的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,以避免再压,但对我的使用情况,因为我是捆绑的所有供应商JS文件一起,我想如果我有级联多个文件,我会得到更好的压缩.(同上,用于CSS fullcalendar.css用fullcalendar.min.css)

免责声明:我不知道这是否是"正确"这样做的方式,但是我知道我在webpack上花了一些试验和错误来获得像FullCalendar和Select2这样的jQuery插件,这个shell和方法确实让它变得简单.

作为参考,链接到我使用此模式的公共仓库中的相关文件:

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

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