nguyên cảo -> Babel sourcemaps sử dụng webpack

Question

Sao chép dán từ các vấn đề ts-loader vì nó có thể thích hợp hơn ở đây:

Làm thế nào để vượt qua sourcemaps typescript để Babel nên điểm cuối sourcemap lại thành file gốc và không phải là biên soạn loại một?

Dưới đây là một ví dụ về thiết lập dev của tôi:

tsconfig.json:

{ 
    "compilerOptions": { 
    "target": "es6", 
    "jsx": "react", 
    "noImplicitAny": false, 
    "sourceMap": true 
    }, 
    "exclude": ["node_modules", "gulpfile.js", "webpack.config.js", "server.js"] 
} 

webpack.dev.js:

var path = require("path"); 
var webpack = require("webpack"); 

module.exports = { 
    devtool: "eval", 
    entry: [ 
    "webpack-hot-middleware/client", 
    "./src/app/index", 
    ], 
    output: { 
    path: path.join(__dirname, "build"), 
    filename: "app.js", 
    publicPath: "/static/" 
    }, 
    plugins: [ 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.NoErrorsPlugin(), 
    new webpack.ProvidePlugin({ 
     'window.fetch': 'exports?self.fetch!whatwg-fetch' 
    }) 
    ], 
    resolve: { 
    extensions: ['', '.ts', '.tsx', '.js'] 
    }, 
    module: { 
    noParse: [ 
     /\/sinon.js/ 
    ], 
    preLoaders: [{ 
     test: /\.ts(x?)$/, 
     loader: "tslint", 
     exclude: /node_modules/ 
    }], 
    loaders: [ 
     { 
     test: /\.tsx?$/, 
     loader: 'babel-loader!ts-loader', 
     exclude: /node_modules/, 
     include: path.join(__dirname, 'src') 
     } 
    ] 
    } 
}; 

Answer 1

Xem loaders: [ // note that babel-loader is configured to run after ts-loader { test: /\.ts(x?)$/, loader: 'babel-loader!ts-loader' } ]

Answer 2

Bạn có thể sử dụng source-map-loader cho webpack. Đây là tôi webpack.config.js:

module.exports = { 
    entry: "./app.ts", 
    output: { 
     filename: "./bundle.js", 
    }, 

    devtool: "source-map", 

    resolve: { 
     extensions: ["", ".webpack.js", ".web.js", ".ts", ".js"] 
    }, 

    module: { 
     loaders: [ 
      // ts -> ES6 -> babel -> ES5 
      { test: /\.tsx?$/, loaders: ["babel-loader", "ts-loader"] } 
     ], 

     preLoaders: [ 
      { test: /\.js$/, loader: "source-map-loader" } 
     ] 
    } 
}; 

Và tsconfig.js:

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