Webpack Visual Studio 2017 .NET Core2.2にバンドルされているChromeでTypescriptをデバッグする

debugcn 投稿 Dev

リチャード・コーソン

そこにはいくつかの質問がありますが、ほとんどの答えは「VS 2017を使用している場合は、現在デフォルトになっているはずです」のようです。デバッガーが機能しないので、特定のケースを挙げて助けを求めたいと思います。コンテキストを説明するために、TypescriptとWebpackも初めてです。

プロジェクト階層

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

プロジェクトがビルドされると、次の手順が実行されます。

コアプロジェクトのビルド
gulpタスクが開始されます
gulpタスク内で、webpackストリームを使用してtypescriptファイルを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("compile-typescript", function () {
    return gulp.src("./Scripts/index.ts")
        .pipe(webpack(require("./webpack.config.js")))
        .pipe(gulp.dest("./wwwroot/bundles"));
});

すべてがコンパイルされて実行された後、Visual Studio IDEにブレークポイントを設定すると、「ブレークポイントがバインドされていない」という問題が発生します。ただし、Chromeのデバッガーを見ると、TypeScriptマッピングファイルがwebpackディレクトリに正しく作成されているようです。

リチャード・コーソン

この回答からの行を追加することによって：https：//stackoverflow.com/a/56512126/5245385私のwebpack.config.jsにそれを機能させることができました!! 視認性のために以下に貼り付けました：

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

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集2021-06-11

コメントを追加

サインイン

分類Dev

Related 関連記事

記事

Webpack Visual Studio 2017 .NET Core2.2にバンドルされているChromeでTypescriptをデバッグする

Webpack Visual Studio 2017 .NET Core2.2にバンドルされているChromeでTypescriptをデバッグする

Visual Studio 2017 + .Net Core2テストは実行できません

Asp.Net Core 2 Web API shows HTTP 404 error on Visual Studio 2017, Windows 10

Visual Studio 2017（.NET Core）での自動バージョン管理

.Net Core SDK 3.0でVisual Studio 2017を使用する

.Net Core SDK 2.0でVisual Studio 2017を使用する

Target .NET Core 2.0 with Azure Functions in Visual Studio 2017

Visual Studio 2017のAzure Functionsで.NET Core 2.0をターゲットにする

Visual Studio 2017 Dot Net Core 2.1およびAngularテンプレートにWebPackが存在しないのはなぜですか？

Visual Studio 2017 Asp.Net Core 2.1 TypeScript Vue Setup - Not SPA

Visual Studio2017で既に実行されているDockerLinux.netコアコンテナーのデバッグ

.NET Core 2.1：Visual Studio 2017でのデバッグ中にプロジェクトファイルで定義されたコピータスクをトリガーする方法は？

Visual Studio2017で.NETFramework 2.0（.NET Core 2.0ではない）をターゲットにする

Visual Studio 2017 RCで.NET Coreプロジェクトをビルドした後に実行されるmsbuildタスクを追加する

Visual Studio2017のDockerASP.NET CORE2.1アプリ。アプリがデバッグモードで起動しない

Creating cs2php compiler using Visual Studio 2017

Visual Studio 2017TFS統合-.netCore 2

.NET Core2で同等のReadAsMultipartAsync

Visual Studio 2017で効果的にデバッグする方法は？

How to debug .NET Core/Standard unit tests in Visual Studio 2017 Mac?

How to debug .NET Core/Standard unit tests in Visual Studio 2017 Mac?

ASP.NET Core2 +のILoggerとDependencyInjection

ASP.NET Core2のweb.config

.NET Core2のStructureMapとProto.Actor

.NET Core2のSystem.Web.ApplicationServices

Visual Studio 2017 v15.5 Aspnet Core2.0.3がIISExpressでのデバッグに失敗する

.NET 4.7 の Visual Studio 2017 で "Roslyn" を使用できますか?

Visual Studio 2017でデバッグポートを変更するにはどうすればよいですか？

Visual Studio 2017 vb.netでreportviewerコントロールを追加する方法

Visual Studio 2017はビルドとデバッグ中に遅すぎる