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

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中包含了一些我还不需要的导入，但我正在使用它作为测试用例来更新一些遗留代码。基本上我的目标是能够编译/捆绑所有的typescript，然后从MVC5静态类传递一些值的typescript。我想从我的.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>

调用MVC5 cshtml文件中的Typescript方法，使用webpack

2 个答案: