Executing a Typescript function in an MVC5 cshtml file, optimized with webpack bundling

Question

Executing a Typescript function in an MVC5 cshtml file, optimized with webpack bundling

Brand new to webpack, and I'm facing obstacles in merging MVC components with webpack AND typescript. Take a look at my code combinations below:

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 am aware that I am importing some unnecessary things in main.ts, but it's a test case for updating legacy code. My ultimate objective is to compile/bundle all the typescript, and then pass certain values from an MVC5 static class to the typescript. I want to be able to call some of the bundled functions FROM my .cshtml files, but I'm struggling with that. I keep getting errors like jqkendoMain is undefined, or jqkendoMain.Main is undefined. Any insights on what I might be overlooking?

The above snippets are just pieces of the code I'm experimenting with, you can find the complete code at https://github.com/vishnu4/WebpackMVC5 .

typescript webpack webpack-2 asp.net-mvc-5

Answer 1

Answer №1

If you stick with the standard tsc configurations, your module output will have Main exported as jqkendoMain.default, not as jqkendoMain.Main.

By eliminating export default and opting for export class Main instead, you can ensure that your Main class is easily accessible as intended.

Don't forget to include the UMD library created by webpack in your cshtml layout.

Answer 2

If you stick with the standard tsc configurations, your module output will have Main exported as jqkendoMain.default, not as jqkendoMain.Main.

By eliminating export default and opting for export class Main instead, you can ensure that your Main class is easily accessible as intended.

Don't forget to include the UMD library created by webpack in your cshtml layout.

Answer 3

Answer №2

I've found a solution that works great for me!

const directory = require('directory-path');

module.exports = 
{
    entry: {
        main: './src/main.js' // or wherever your main entry point is
    },
    mode: 'development',
    devServer: {
        contentBase: './public'
    },
    output: {
        path: directory.resolve(__dirname, 'public'),
        filename: '[name].js',
        library: 'MyLibrary',
        libraryTarget: "umd"
    }
    // ...
}

// main.js
import { MyClass } from './myclass'
export { MyClass }

// myclass.js
export class MyClass { constructor() { console.log('hi there!'); }

C:> webpack --watch

// index.html
<script src='~/public/main.js'></script>
<script>
     var myclass = new MyLibrary.MyClass();  // hi there!
</script>

Answer 4

I've found a solution that works great for me!

const directory = require('directory-path');

module.exports = 
{
    entry: {
        main: './src/main.js' // or wherever your main entry point is
    },
    mode: 'development',
    devServer: {
        contentBase: './public'
    },
    output: {
        path: directory.resolve(__dirname, 'public'),
        filename: '[name].js',
        library: 'MyLibrary',
        libraryTarget: "umd"
    }
    // ...
}

// main.js
import { MyClass } from './myclass'
export { MyClass }

// myclass.js
export class MyClass { constructor() { console.log('hi there!'); }

C:> webpack --watch

// index.html
<script src='~/public/main.js'></script>
<script>
     var myclass = new MyLibrary.MyClass();  // hi there!
</script>

Executing a Typescript function in an MVC5 cshtml file, optimized with webpack bundling

Answer №1

Answer №2

Similar questions

You must pass a string, Buffer, ArrayBuffer, or Array as the first argument when using Uint8Array.slice(). A number was received instead

Unable to locate webpack module

Comparing angular2/core and @angular/core: What sets them apart?

What is the proper way to provide parameters for express.use to avoid encountering a type error?

What is the best way to search for and isolate an array object within an array of objects using Javascript?

Hiding components in Angular 4/5 through routing decisions

Exploring the methods to update axios request configuration

Allow only specified tags in the react-html-parser white list

Mixing a static class factory method with an instance method: a guide

How to connect a form component object with a parent object in Vue3 using v-model and the Options API?

Allow Visual Studio Code to create a constructor for Typescript class

Dealing with missing image sources in Angular 6 by catching errors and attempting to reset the source

`The process of converting Typescript to ES5 through compiling/transpiling is encountering issues`

"Would someone be able to advise me on how to correctly reference the PrimeNG AutoCompleteModule within my

Ensuring type signatures are maintained when wrapping Vue computed properties and methods within the Vue.extend constructor

What is the best way to transfer an object from the view to the controller in AngularJS and ASP.net MVC

What causes the module declaration in the .d.ts file to fail in an Angular application?

Having trouble selecting all checkboxes in the tree using angular2-tree when it first initializes

Typescript, left untranspiled in Karma test runs

Collapsible list in Angular2 sidenav: ensuring only one sublist remains open