webpack - Webpack を使用してバンドルを作成するときに、Kendo コントロールがカスタム js 関数を使用できるようにするにはどうすればよいですか?

Question

私は webpack を初めて使用し、まだ学習曲線を上っています。Jquery に Kendo UI を使用しています。剣道グリッドの列の 1 つから JavaScript 関数を呼び出したいです。webpack がどうにかして Kendo を JavaScript 関数から切り離していると推測しています。

ブラウザーでスローされるエラーは、「Uncaught ReferenceError: getFullMonthName is not defined」です。

以下は、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';