webpack - 当我使用 webpack 制作 bundle 时，如何允许 Kendo 控件使用自定义 js 函数？

Question

我是 webpack 的新手，并且仍在攀登学习曲线。我正在为 Jquery 使用 Kendo UI。我想从 Kendo Grid 列之一调用 javascript 函数。我猜 webpack 以某种方式将 Kendo 与我的 javascript 函数隔离开来。

浏览器中抛出的错误是“未捕获的 ReferenceError：getFullMonthName 未定义”。

这是我尝试导入 Kendo 的模块及其默认主题样式表：

import 'bootstrap';
import '@progress/kendo-ui';
import '@progress/kendo-theme-default/dist/all.css';

$(document).ready(function () {

//This is the function I want to call from the grid column below
function getFullMonthName(monthNum) {
    var months = {
        1: "January",
        2: "February",
        3: "March",
        4: "April",
        5: "May",
        6: "June",
        7: "July",
        8: "August",
        9: "September",
        10: "October",
        11: "November",
        12: "December"
    };
    return months[monthNum];
}

$("#grid").kendoGrid({
    columns: [
        { field: "Year", title: "Year", sortable: true }, 
        { field: "Month", title: "Month", template: "#= getFullMonthName(Month) #", sortable: true 
}, // calling the function getFullMonthName does not work when I try to import Kendo with webpack
        { field: "Value" }
    ],
    dataSource: {
        data: [
            { Month: 1, Year: 2019, Value: 123 },
            { Month: 2, Year: 2019, Value: 456 },
            { Month: 3, Year: 2019, Value: 789 }
        ],
        pageSize: 10
    }
});

}); //document ready closing 

这是我的 webpack 配置：

const glob = require('glob');
const webpack = require('webpack');
const PurgecssPlugin = require('purgecss-webpack-plugin');

module.exports = {
    entry: {
        site: './wwwroot/js/site.js',
        validation: './wwwroot/js/validation.js',
        index: './wwwroot/js/index.js', 
        calculationResults: './wwwroot/js/calculationResults.js'
    },
    output: {
        filename: '[name].entry.js',
        path: __dirname + '/wwwroot/dist'
    },
    devtool: 'source-map',
    mode: 'development',
    module: {
        rules: [
            { test: /\.css$/, use: ['style-loader', 'css-loader'] }, "css-loader"] },
            { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader" },
            { test: /\.(woff|woff2)$/, loader: "url-loader?prefix=font/&limit=5000" },
            { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/octet-stream" },
            { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=image/svg+xml" },
        ],
    },
    plugins: [
        new PurgecssPlugin({
            paths: glob.sync('./Views/**/*.cshtml', { nodir: true })
        }),
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery'
        }),
    ]
};

此外，我还有另一个正在构建的模块，我通过 Layout.cshtml 屏幕 (site.js) 上的脚本标记引用它：

import $ from 'jquery';
window.jQuery = $; window.$ = $;
//import 'malihu-custom-scrollbar-plugin';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap';
import '@fortawesome/fontawesome-free/js/fontawesome';
import '@fortawesome/fontawesome-free/js/solid';
import '@fortawesome/fontawesome-free/js/regular';

// Custom CSS imports
import '../css/site.css';

标签： webpackkendo-ui