gọi phương thức Typescript trong tệp MVC5 cshtml, đi kèm với webpack

Question

Chỉ cần bắt đầu với webpack và tôi gặp sự cố khi kết hợp một số tính năng MVC với webpack AND typescript. Xem dưới đây để kết hợp mã của tôi:

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

... 

Tôi biết tôi đang bao gồm một số nhập khẩu mà tôi không cần (chưa) trong main.ts, nhưng tôi đang sử dụng điều này như là một trường hợp thử nghiệm để cập nhật một số mã di sản. Về cơ bản, mục tiêu của tôi là để có thể biên dịch/bó tất cả các loại bản ghi, và sau đó chuyển đến các bản ghi một số giá trị từ một lớp tĩnh MVC5. Tôi đang tìm cách gọi một số chức năng đi kèm từ tệp .cshtml của tôi, nhưng tôi không thấy cách thực hiện điều đó. Tôi nhận được rằng jqkendoMain là không xác định, hoặc jqkendoMain.Main là không xác định hoặc bất cứ điều gì. Bất kỳ ý tưởng về những gì tôi đang mất tích?

Trên đây chỉ là mẫu mã mà tôi đang thử, bạn có thể thấy mã thực sự ở dạng toàn bộ tại https://github.com/vishnu4/WebpackMVC5.

Answer 1

Nếu sử dụng cài đặt tsc mặc định, mô đun được tạo của bạn sẽ xuất Main dưới dạng jqkendoMain.default, nhưng không phải jqkendoMain.Main.

Xóa export default và thay vào đó chỉ sử dụng export class Main sẽ giúp bạn có thể truy cập vào lớp học Main như mong đợi.

Hãy nhớ thực sự bao gồm thư viện UMD được tạo bởi webpack trong bố cục cshtml của bạn.