Typescript webpack ts-loaderを使用しているときにソースが表示されない

Question

私は、gratchタスクからwebpackとts-loaderを使用してTypescriptを解凍し、デバッグプロダクション用のソースマップを生成しています。私のチームは、JavaScriptソースだけでなくオリジナルのTypescriptソースを見たいと思っています。私は正しい解決策を探して、ドキュメントの多くのページと多くの質問/回答を見てきましたが、これまでブラウザでTypescriptファイルを見ることはできません.JavaScriptバージョンのみです。

私たちのプロジェクトルートモジュール、またはwebpackタスク用の「エントリ」webpackEntryは、JavaScriptファイルが必要です.JavaScriptファイルが必要ですが、その中にはTypeScriptからコンパイルされたものもありますが、手動で作成されたものもあります。

 webpack: { 
     options: { 
      entry: webpackEntry, 
      output: { 
       path: webpackDest, 
       filename: 'app-min.js', 
       libraryTarget: "assign", 
       pathInfo: true 
      }, 
      externals: grunt.file.readJSON('app-ui/webpack-externals.json'), 
      progress: true 
     }, 
     prod: { 
      devtool: 'source-map', 
      plugins: [ 
       new webpack.optimize.UglifyJsPlugin(), 
       new webpack.optimize.OccurenceOrderPlugin(), 
       new webpack.optimize.DedupePlugin(), 
       new webpack.SourceMapDevToolPlugin({ 
        test: /\.tsx?$/, 
        exclude: 'node_modules', 
        module: true, 
        filename: '[file].map', 
        append: false 
       }) 
      ], 
      resolve: { 
       // Add `.ts` and `.tsx` as a resolvable extension. 
       extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js','.jsx'] 
      }, 
      module: { 
       loaders: [ 
        // all files with a `.ts` or `.tsx` extension will be handled by `ts-loader` 
        { test: /\.tsx?$/, loader: 'ts-loader', exclude: 'node_modules' } 
       ] 
      }, 
      ts: { 
       // configures the ts compiler: 
       "compilerOptions": { 
        "target": "es5", 
        "sourceMap": true, 
        "jsx": "react", 
        "experimentalDecorators": true 
       }, 
       "exclude": [ 
        "node_modules" // add other exclusions for the ts compiler. 
       ] 
      } 
     }... 

そしてtsconfig.json：

私はWebPACKのを持っている "PROD" タスクは、このように構成され

{ 
    "compilerOptions": { 
     "target": "es5", 
     "sourceMap": true 
    }, 
    "exclude": [ 
     "node_modules" 
     ] 
} 

...しかし、私はクローム開発ツールのソースに見るすべてのJavaScriptですソースファイル。元のJavaScriptソースファイル、元のTypescriptファイルは表示できますが、透明化されたJavaScriptファイルは表示できません。

更新： 以下の@ basaratの提案に従い、source-map-loaderツールを追加しました。 dev-toolsウィンドウにJavaScriptファイルしか表示されません。

関連抜粋：このを支援することができTS-ローダーで

module: { 
       loaders: [ 
        // all files with a `.ts` or `.tsx` extension will be handled by `ts-loader` 
        { test: /\.tsx?$/, loader: 'ts-loader', exclude: 'node_modules' } 
       ], 
       preLoaders: [ 
        // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'. 
        { test: /\.js$/, loader: "source-map-loader", exclude: ['node_modules', 'ext-*', 'lib', 'tools'] } 
       ] 
      }, ... 

任意の専門家？あなたの助けを前もってありがとう！

Answer 1

ソースマップローダーを使用する必要があります。これはここに覆われている：あなたは、以下のようなあなたのWebPACKの設定にsourcemapするデベロッパーツールの価値を提供することができます

module: { 
    loaders: [ 
     // All files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'. 
     { test: /\.tsx?$/, loader: "ts-loader" } 
    ], 

    preLoaders: [ 
     // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'. 
     { test: /\.js$/, loader: "source-map-loader" } 
    ] 
}, 

Answer 2

：

module.exports = { 
    entry:'./app/app', 
    output:{ 
     filename:'bundle.js', 
    }, 
    resolve:{ 
     extensions:['','.ts','.js'], 
     modulesDirectories: ['node_modules'] 
    }, 
    module:{ 
     loaders:[ 
      { 
       test: /\.ts$/, loader: 'ts-loader' 
      } 
     ] 
    }, 
    devtool: "sourcemap" /*<=================*/ 
} 

マイクロソフトのガイドはここに位置していますhttps://github.com/Microsoft/TypeScript-Handbook/blob/master/pages/quick-start/react-webpack.md

あなたのWebPACKの設定は次のようにする必要があります：https://github.com/Microsoft/TypeScript-Handbook/blob/master/pages/tutorials/React%20%26%20Webpack.md