ソースマップとwebpackでtypescriptをデバッグ

プロジェクトはTypescriptで書かれており、デバッグできるようにしたい（Chrome Dev ToolsまたはIntellijのいずれか）。ソースマップとwebpackでtypescriptをデバッグ

まず、Typescriptのimport機能がサポートされていないことがわかりました。だから私はwebpack dev serverと一緒にWebpackを使ってみましたが、これは完全に失敗しました。私のアプリケーションは（すべてのコードを持つ単一のbundle.jsファイルを持っているために）動作していましたが、コードを特定のソースマップと一致させることができず、デバッグが不可能になります。

webpackの使用を中止した後、私はエラーを解決するために依存性としてrequire.jsを追加しようとしました。それは働いていたが、今私は再び立ち往生し、これを取得しています：

Uncaught ReferenceError: exports is not defined

私は、これが機能しない理由はわかりません。私はアプリケーションを動作させるために（webpack経由で、または翻訳後のインポート文を解決できるように）、typescriptで生成されたソースマップを使用してコードをデバッグできるようにしたいと考えています。どうすればこれを達成できますか？

私はそこに欠けているものがある場合には、私のconfigファイルを添付しています：

{ 
    "compilerOptions": { 
    "module": "commonjs", 
    "target": "es6", 
    "sourceMap": true 
    }, 
    "include": [ 
    "scripts/**/*" 
    ], 
    "exclude": [ 
    "node_modules" 
    ] 
}

tsconfig.json webpack.config.js：

module.exports = { 
    resolve: { 
     extensions: [/*'.ts', '.tsx', */'.js'] 
    }, 
    entry: './scripts/main.js', 
    output: { 
     path: '/', 
     filename: 'app.js' 
    }, 
    module: { 
     rules: [ 
      { test: /\.js$/, loader: 'source-map-loader', enforce: 'pre' } 
     ], 
     loaders: [ 
      { test: /\.tsx?$/, loader: 'ts-loader', exclude: /node_modules/ }, 
      {test: /\.css$/, loader: "style!css"} 
     ] 
    }, 
    watch: true 
};

出典

2017-03-19 Konstantine

RequireJSは、AMDモジュール、commonjsないものを使用しています... – Lucero

でデバッグを有効にするにはあなたのwebpack.config.jsにdevtool: "source-map"を追加してください。

require.jsを使用してファイルをロードするには、"module": "amd"をtsconfig.jsonに変更します。 require.jsは、commonjsモジュールの読み込みをサポートしていません。

出典

2017-03-19 01:52:18 Saravana

ビッグありがとう！両方の方法が実際に働いた。私は 'webpack-dev-server'を介してchromeとデバッグすることができます。また、正しくマップされ、変換されたIntelliJを使ってデバッグできます。Typescript – Konstantine

ここに回答を掲載します。この回答はではありません。（手順5を参照）。それは人によって大きく異なります。研究に費やされた数日後に、GitHubのロビン・ア・ミードの投稿がそれを釘付けにした。

開始する前に、主な問題は、VSコードデバッグ設定ファイル内のソースマッピングのURLと、そのアプリケーション（VSコード）がアプリケーションをどのように見ているかのようです。これは、使用しているバックエンドスタック（例：Express、.NET Core、Djangoなど）から独立しています。あなたが知っておく必要があるのは、アプリケーションの実行中にGoogle Chromeが生成されたソースマップを正常に読み込むことだけです。

Visual Studioのコードを1.13.1
NodeJS 7.4.0
のWindows 10の64ビット
のWebPACK 2.5（同様のWebPACK 3を申請してください）

TypeScript 2

3は、Google Chromeの拡張機能をインストール：

1）は、左の四角いアイコンをクリックします。

2,3）「Debugger for Chrome」と入力し、カンマを付けずにクリックしてインストールします。

を設定し、デバッガ：

4）バグのアイコンをクリックしてください。

5）歯車のアイコンをクリックします。これは、 "launch.json"を開きます。これは、Visual Studio Codeでデバッグを設定するために使用されます。

今すぐ。これは本当に面倒なところです。これは、あなたのために働くかもしれないし、働かないかもしれない部分です。

6）次のように入力します。

ここでも、おかげでそのコードが、それが仕事作っrobin-a-meade from GitHubに行きます。これで、URLにhttp://localhostのGoogle Chromeインスタンスが起動されます。次に、webpack://パスを使用してWebpackマッピングを検索します。これは本当に扱いにくいもので、異なる組み合わせで試してみると、どちらが機能するのか確認する必要があります。

{ 
      "name": "Launch Chrome against localhost, with sourcemaps", 
      "type": "chrome", 
      "request": "launch", 
      "url": "http://localhost", 
      "sourceMaps": true, 
      "webRoot": "${workspaceRoot}", 
      "diagnosticLogging": true, 
      "sourceMapPathOverrides": { 
       "webpack:///./*": "${webRoot}/*" 
      } 
     }

Firefoxを使用している場合は、このいずれかを使用してみてくださいは：

{ 
      "name": "Launch Firefox", 
      "type": "firefox", 
      "firefoxExecutable": "C:/Program Files/Mozilla Firefox/firefox.exe", 
      "request": "launch", 
      "reAttach": true, 
      "webRoot": "${workspaceRoot}", 
      "sourceMaps": "server", 

      "pathMappings": [ 
       { 
        "url": "webpack:///", 
        "path": "${webRoot}/" 
       } 
      ], 
      "url": "localhost" 
     }

WebPACKの設定 追加：

devtool： "ソースマップ"

あなたへウェブパックの設定。これはmodules.exportオブジェクトの下に置かなければなりません。