Call Typescript method in MVC5 cshtml file, bundled using webpack

Question

We just start with webpack, and I'm having problems integrating some MVC functions with webpack AND typescript. Below are my code combinations:

webpack.config.js:

var wbConfigEntries = { "jqkendoMain": [ paths.appjs + "main.ts" ] }; module.exports = { devtool: 'source-map', entry: wbConfigEntries, target: 'web', output: { path: paths.dist, publicPath: './', filename: outputFile, library: "[name]", libraryTarget: "umd", umdNamedDefine: true }, .... 

main.ts:

 import * as $ from 'jquery'; import * as bootstrap from 'bootstrap'; import '../node_modules/@progress/kendo-ui/js/kendo.web'; import '../node_modules/@progress/kendo-ui/js/kendo.aspnetmvc'; import '../node_modules/bootstrap/dist/css/bootstrap.css'; import '../node_modules/bootstrap/dist/css/bootstrap-theme.css'; import '../node_modules/font-awesome/css/font-awesome.css'; import '../node_modules/@progress/kendo-ui/css/web/kendo.common.css'; export default class Main { private _name = ''; constructor(name: string) { this._name = name; } TestFunc() { console.log(this._name); } } 

_layout.cshtml:

 ... var mn = new jqkendoMain.Main('@WebpackMVC5App.Helpers.WebConfigSettings.RandomWebConfigValue'); mn.TestFunc(); ... 

I know that I include some imports that I do not need (yet) in main.ts, but I use this as a test case to update some outdated code. Basically, my goal is to collect / combine all typescript, and then pass some types from the static class MVC5 to typescript. I want to call some of the related functions from my .cshtml files, but I don't see how to do this. I get jqkendoMain undefined, or jqkendoMain.Main - undefined or something else. Any ideas on what I am missing?

The above are just code samples that I'm trying to execute, you can see the actual code in its entirety at https://github.com/vishnu4/WebpackMVC5 .

Answer 1

When using the tsc settings by default, your generated module will export Main as jqkendoMain.default , but not jqkendoMain.Main .

Removing export default and instead, using only the export class Main , should make your Main class available as you expect.

Remember to include the UMD library generated by webpack in your cshtml layout.