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

Question

刚开始使用 webpack，我无法将一些 MVC 功能与 webpack 和 typescript 结合起来。请参阅下面的代码组合：

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
    },
....

ma​​in.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 看到完整的实际代码。

Answer 1

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

删除 export default 并仅使用 export class Main 应该可以让您的 Main 类可以按预期访问。

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

Answer 2

This works for me !

const path = require('path');

module.exports = 
{
    entry: {
        default: './src/default.js' // or whereever you put your entry(s)
    },
    mode: 'development',
    devServer: {
        contentBase: './dist'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js',
        library: 'YourNamespace',
        libraryTarget: "umd"
    }
    // ...
}

// default.js
import { YourClass } from './yourclass'
export { YourClass } 

// yourclass.ts
export class YourClass { constructor() { console.log('hello!'); }   

C:> webpack --watch 

// _Layout.cshtml
<script src='~/dist/default.js'></script>
<script>
     var yourclass = new YourNamespace.YourClass();  // hello!
</script>