在MVC5 cshtml文件中调用Typescript方法，使用webpack捆绑

刚开始使用webpack，我无法将一些MVC功能与webpack和typescript结合起来。请参阅下面的我的代码组合：在MVC5 cshtml文件中调用Typescript方法，使用webpack捆绑

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(); 

...

我知道我在main.ts中包含了几个不需要的输入，但是我用它作为测试用例来更新一些遗留代码。基本上我的目标是能够编译/捆绑所有的打字稿，然后从MVC5静态类传递打字稿的一些值。我正打算从我的.cshtml文件中调用一些捆绑的函数，但我没有看到如何做到这一点。我得到的jqkendoMain是未定义的，或者jqkendoMain.Main是未定义的或任何。任何想法，我失踪了？

以上仅仅是我试用的代码示例，您可以在https://github.com/vishnu4/WebpackMVC5处看到完整的代码。

来源

2017-07-23 Phil

如果使用默认的tsc设置，则生成的模块将导出Main为jqkendoMain.default，但不是jqkendoMain.Main。

删除export default而不是使用export class Main应该让您的Main类可以像您期望的那样访问。

记得在cshtml布局中实际包含由webpack生成的UMD库。

来源

2017-08-02 08:11:13

谢谢，我删除了默认，但我在上面的github项目中的代码仍然无法正常工作。我得到'jqkendoMain.Main不是构造函数'错误。我正在引用cshtml中的库。 – Phil

然后，我需要查看生成的输出以提供更多信息。还想你的'tsconfig.json'文件 –

我的tsconfig.json位于我提到的问题中的github项目。直接链接是：https：//github.com/vishnu4/WebpackMVC5/blob/master/WebpackMVC5App/tsconfig.json。 webpack生成的输出可在以下网址找到：https：//gist.github.com/vishnu4/50f50ea64d4bd26b23024a38fe21eaa6。 – Phil

在MVC5 cshtml文件中调用Typescript方法，使用webpack捆绑

回答

相关问题