在由 Webpack Visual Studio 2017 .NET Core 2.2 捆绑的 Chrome 中调试 Typescript [英] Debug Typescript in Chrome bundled by Webpack Visual Studio 2017 .NET Core 2.2

查看:24
本文介绍了在由 Webpack Visual Studio 2017 .NET Core 2.2 捆绑的 Chrome 中调试 Typescript的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

有几个问题,但大多数答案似乎是如果你有 VS 2017,它现在​​应该是默认值".我的调试器不工作,所以我想给出我的具体案例以获得一些帮助.我也是 Typescript & 的新手Webpack 提供一些上下文.

There are a couple questions out there but most of the answers seem to be "it should be default now if you have VS 2017". My debugger isn't working, so I'd like to give my specific case to get some help. I'm also new to Typescript & Webpack to give some context.

项目层次结构

./wwwroot/bundles/bundle.js <- this is the final bundled file
./Scripts/ <- various directories where all the separate Typescript files live

当项目构建时,它会经历以下步骤:

When the project builds, it goes through these steps:

  • 核心项目构建
  • gulp 任务开始
  • 在 gulp 任务中,我使用 webpack 流将打字稿文件构建到 bundle.js 中

我的 tsconfig.json 文件的内容

{
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "strict": true,
    "noImplicitReturns": true,
    "target": "es2015",
    "moduleResolution": "node",
    "module": "es2015"
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

webpack.config.js 文件的内容

module.exports = {
    mode: 'development',
    entry: './Scripts/index.ts',
    devtool: 'inline-source-map',
    module: {
        rules: [
            {
                test: /.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/
            }
        ]
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        }
    },
    output: {
        filename: 'bundle.js'
    }
};

Gulp 任务 编译打字稿并将其放入最终目的地.

Gulp task that compiles the typescript and puts it in it's final destination.

gulp.task("compile-typescript", function () {
    return gulp.src("./Scripts/index.ts")
        .pipe(webpack(require("./webpack.config.js")))
        .pipe(gulp.dest("./wwwroot/bundles"));
});

在编译并运行所有内容后,当我在 Visual Studio IDE 中放置断点时,出现断点未绑定"问题.但是,在 Chrome 中查看调试器时,似乎在 webpack 目录中正确创建了 TypeScript 映射文件.

After everything is compiled and running, when I put a break point in the Visual Studio IDE I get the "breakpoint not bound" problem. However, when looking at the debugger in Chrome, it seems like the TypeScript mapping files are being created in the webpack directory correctly.

推荐答案

通过添加此答案中的行:https://stackoverflow.com/a/56512126/5245385 到我的 webpack.config.js 我能够让它工作!粘贴在下方以供查看:

By adding the lines from this answer: https://stackoverflow.com/a/56512126/5245385 to my webpack.config.js I was able to get it working!! Pasted below for visibility:

devtool: false,
plugins: [
    new webpack.SourceMapDevToolPlugin({
        filename: "[file].map",
        fallbackModuleFilenameTemplate: '[absolute-resource-path]',
        moduleFilenameTemplate: '[absolute-resource-path]'
    })
]

这篇关于在由 Webpack Visual Studio 2017 .NET Core 2.2 捆绑的 Chrome 中调试 Typescript的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆