Webpack + React + Maszynopis

Question

Czy można korzystać z pakietu internetowego za pomocą React i Maszynopisów i móc je pakować w pakiet internetowy, ale nadal można debugować oryginalny kod TypeScript i kod React? W pakiecie internetowym używam ts-loader i ts-jsx-loader plus devtool: "source-map", ale kiedy próbuję wykonać debugowanie przeglądarki, nie widzę oryginalnego kodu ts, ale zamiast tego widzę kod, który został zmieniony przez pakiet internetowy.

Mój obecny podstawowy plik webpack.config.js:

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" 
    ] 
} 

Na przykład - mój oryginalna plik .ts wygląda następująco:

import React = require('react'); 

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

aw chrome debuggatorze wygląda to tak:

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

Prawdopodobnie nie podano nazwy sourceMap w pliku tsconfig.json, więc kompilator TypeScript nie wysyła plików typu sourcemaps.

Answer 2

Nie trzeba używać programu ładującego ts-jsx.

W pliku tsconfig.json wystarczy coś takiego:

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

I oczywiście, trzeba jeszcze wybrać opcję devtool w pliku konfiguracyjnym WebPack