.NET Core with Webpack 4 - how to access javascript module from razor view?

Question

I have been looking everywhere and can't for the life of me figure this out. Hoping someone here has the right answer...

I created a new .NET Core 2.1 web app with c# and Razor Views. I'm seasoned in MVC but new to .NET Core and especially the notion of webpack. I used to use requireJS for bundling and handling modules, now I'm using webpack to create my bundles.

Every webpack example I've seen just includes a reference to the bundle from within a razor view - i.e..<script src="~/dist/app.bundle.js"></script> and everything is done within the script.

My question is - how do I access the object within that bundle, or more importantly, pass it some parameters? What I want to do is something like this:

This would be the app.js that compiles into app.bundle.js with webpack:

export default class ES6Lib {
    constructor(userName) {
        this.text = "<h1>Hello there, " + userName + "!</h1>"; 
    }
    getData() {        
        return this.text;
    }
}

Basically I want in my specific Razor view (not just _Layout.cshtml) to include this bundle and code, and instantiate it so I can pass in a value from the server-side, in this case, the userName would come from server.

Something like:

<script src="app.bundle.js"></script>
<script>
    var userName = '@Model.UserName'; // from server = 'Jesse'
    var myClass = new ES6Lib(userName); // pass in a parameter
    var greeting = myClass.getData(); // run a function

    console.log(greeting); // prints 'Hello there, Jesse!'
</script>

Obviously, this doesn't work - but how the heck can I instantiate an object from a module and pass a value into it? Or how do I build a correct module that can be used in this way?

Some examples would be very, very helpful. Thanks!

Answer 1

You could simply ask Webpack to create a library by setting library in webpack.config.js :

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, "..", 'wwwroot/js'),
        filename: 'app.bundle.js',
        library: 'OurLibrary',
    },
};

This will generate a lib named as OurLibrary which exposes those properties "exported" in our module :

// exports the default as `ES6Lib`
export default class ES6Lib {
    constructor(userName) {
        this.text = "<h1>Hello there, " + userName + "!</h1>"; 
    }
    getData() {        
        return this.text;
    }
}

// exports the answer
export function answer(){
    return 42;
}

(Note the export default in your javasript code .)

and now you can use it in views :

<script src="~/js/app.bundle.js"></script>
<script>
    var ES6Lib= OurLibrary.default;
    var userName = '@Model.UserName'; // from server = 'Jesse'
    var myClass = new ES6Lib(userName); // pass in a parameter
    var greeting = myClass.getData(); // run a function

    console.log(greeting); // prints 'Hello there, Jesse!'

    console.log(OurLibrary.answer()); // prints 42
</script>