Question

我刚刚开始学习ASP.NET Core和TypeScript的基础知识。我有以下对象类：

export class StoreCustomer {
    constructor(private firstName: string, private lastName: string) {
    }

    public ShowName() {
        alert(this.firstName + " " + this.lastName);
    }
}

以下main.ts类：

import { StoreCustomer } from "./storecustomer";

let a = new StoreCustomer("FirstName", "LastName");
a.ShowName();

两个TS文件都存在于wwwroot文件夹中。当我在HTML页面中引用转换的JS文件时，我收到错误消息，指出exports未定义。我了解到您需要使用模块加载器来解决此问题，因此我通过webpack在我的项目中安装了NPM。 webpack再次生成新的JS文件，在我的HTML页面中引用时，我得到了所需的输出。但问题是，由于TS文件不在同一目录中，并且我无法在与TS文件相同的文件夹中生成js文件，因此无法在浏览器中调试TS文件。如何从通过webpack生成的JS文件调试TS文件？

编辑：

我的webpack.config.js文件：

var path = require('path');

    module.exports = {
        entry: {
            main: './wwwroot/ts/main.js',
            storecustomer: './wwwroot/ts/storecustomer.js',
        },
        output: {
            path: path.resolve(__dirname, './wwwroot/scripts'),
            filename: '[name].js'
        },
        devtool: "source-map",
    };

Answer 1

在您的webpack配置中，您从.js文件开始，这就是.map文件指向.js文件的原因。

如果要查看TypeScript文件，则需要配置webpack以使用ts-loader（https://webpack.js.org/guides/typescript/）：

例如：

rules: [
  {
    test: /\.ts$/,
    use: 'ts-loader',
    exclude: /node_modules/
  }
]

从通过webpack生成的JS文件中调试brower中的typescript（.ts）文件

1 个答案: