Webpack + React + Typescript

Question

È possibile utilizzare webpack con React e Typescript e essere in grado di raggrupparli in un pacchetto Web, ma essere ancora in grado di eseguire il debug del codice TypeScript e React originale? Nel webpack sto usando ts-loader e ts-jsx-loader plus devtool: "source-map", ma quando provo a fare il debug del browser, non riesco a vedere il codice ts originale ma vedo il codice che è stato cambiato da webpack.

Il mio attuale file di webpack.config.js base:

var webpack = require('webpack'); 
module.exports = { 
    entry: ['./app/main.ts'], 
    output: { 
    path: './build', 
    filename: 'bundle.js' 
    }, 
    debug: true, 
    devtool: 'source-map', 
    plugins: [ 
    new webpack.optimize.DedupePlugin(), 
    new webpack.optimize.UglifyJsPlugin() 
    ], 
    resolve: { 
    extensions: ['', '.ts', '.js'] 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.ts$/, 
     loader: 'ts-loader!ts-jsx-loader' 
     } 
    ] 
    } 
}; 

tsconfig.json:

{ 
    "compileOnSave": false, 
    "version": "1.5.0-alpha", 
    "compilerOptions": { 
     "target": "es5", 
     "module": "commonjs", 
     "noLib": false, 
     "sourceMap": true, 
     "noImplicitAny": true, 
     "removeComments": true 
    }, 
    "files": [ 
     "./AppComponent.ts", 
     "./libs/jsx.d.ts", 
     "./libs/react.d.ts", 
     "./libs/webpack-runtime.d.ts", 
     "./main.ts" 
    ] 
} 

Per esempio - il mio file .ts oryginal assomiglia:

import React = require('react'); 

class AppComponent extends React.Component<any, any> { 
    render() { 
    return React.jsx(` 
     <h1>He world!</h1> 
    `); 
    } 
}; 
export = AppComponent; 

e in chrome debugger appare così:

var __extends = this.__extends || function (d, b) { 
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; 
    function __() { this.constructor = d; } 
    __.prototype = b.prototype; 
    d.prototype = new __(); 
}; 
var React = __webpack_require__(2); 
var AppComponent = (function (_super) { 
    __extends(AppComponent, _super); 
    function AppComponent() { 
     _super.apply(this, arguments); 
    } 
    AppComponent.prototype.render = function() { 
     return (React.createElement("h1", null, "He world!")); 
    }; 
    return AppComponent; 
})(React.Component); 
; 
module.exports = AppComponent; 


/***************** 
** WEBPACK FOOTER 
** ./app/AppComponent.ts 
** module id = 158 
** module chunks = 0 
**/ 

Answer 1

È probabile che non sia stato specificato nel file tsconfig.json, in modo che il compilatore TypeScript non stia emettendo le informazioni sul codice sorgente.

Answer 2

Non è necessario utilizzare il caricatore ts-jsx.

Nel file tsconfig.json si solo bisogno di qualcosa di simile:

{ 
    "compilerOptions": { 
    "jsx": "react", 
    "sourceMap": true, 
    // ... other options 
    } 
} 

E, naturalmente, è ancora necessario l'opzione DevTool nel file di configurazione webpack