Webpack + React + Typescript

Question

Webpack'i React ve Typescript ile kullanmak ve bunları bir web paketine paketlemek mümkün, ancak orijinal TypeScript ve React kodunu ayıklamak mümkün olabilir mi? Webpack'de ts-loader ve ts-jsx-loader artı devtool kullanıyorum: "source-map", ancak tarayıcı hata ayıklama işlemini yapmaya çalıştığımda, orijinal ts kodunu göremiyorum ama bunun yerine değiştirilmiş kodu görüyorum webpack tarafından.

Benim şu anki temel webpack.config.js dosyası:

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: Örneğin

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

- benim oryginal ts dosyası aşağıdaki gibidir:

import React = require('react'); 

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

ve krom hata ayıklayıcıda şöyle görünür:

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

tsconfig.json dosyanızda sourceMap belirtilmemiş olması muhtemel olduğundan, TypeScript derleyicisi sourcemaps çıktı vermiyor.

Answer 2

ts-jsx yükleyicisini kullanmanıza gerek yoktur.

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

Ve tabii

, hala webpack yapılandırma dosyası Ben tsconfig için sourceMap ekledik