.NET Core 与 Webpack 4 - 如何从剃刀视图访问 javascript 模块？

Question

我一直在四处寻找，但终生无法弄清楚这一点。希望这里有人有正确的答案...

我使用 c# 和 Razor 视图创建了一个新的 .NET Core 2.1 Web 应用程序。我在 MVC 方面经验丰富，但对 .NET Core 尤其是 webpack 的概念不熟悉。我以前使用 requireJS 来打包和处理模块，现在我使用 webpack 来创建我的包。

我见过的每个 webpack 示例都只包含从剃刀视图中对包的引用 - 即<script src="~/dist/app.bundle.js"></script>，并且所有内容都在脚本中完成。

我的问题是 - 我如何访问该包中的对象，或者更重要的是，向它传递一些参数？我想做的是这样的：

这将是使用 webpack 编译成 app.bundle.js 的 app.js：

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

基本上，我希望在我的特定 Razor 视图（不仅仅是 _Layout.cshtml）中包含这个包和代码，并对其进行实例化，以便我可以从服务器端传入一个值，在这种情况下，用户名将来自服务器。

类似：

<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>

显然，这是行不通的——但是我怎么能从一个模块中实例化一个对象并将一个值传递给它呢？或者我如何构建可以以这种方式使用的正确模块？

一些例子会非常非常有帮助。谢谢！

Answer 1

您可以通过在webpack.config.js 中设置library 来简单地要求Webpack 创建一个库：

const path = require('path');

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

这将生成一个名为OurLibrary 的库，它会在我们的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;
}

（请注意您的 javasript 代码中的 export default。）

现在你可以在视图中使用它了：

<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>