Typescript -> Babel sourcemaps 使用 webpack答案

【问题标题】：Typescript -> Babel sourcemaps using webpackTypescript -> Babel sourcemaps 使用 webpack
【发布时间】：2016-03-08 15:07:43
【问题描述】：

从 ts-loader 问题中复制粘贴，因为这里可能更合适：

如何将 typescript sourcemaps 传递给 babel，以便最终 sourcemap 指向原始文件而不是编译后的 typescript 文件？

这是我的开发设置示例：

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')
      }
    ]
  }
};

【问题讨论】：

标签： typescript webpack babeljs

【解决方案1】：

您可以将source-map-loader 用于 webpack。这是我的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" }
        ]
    }
};

还有tsconfig.js:

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

【讨论】：

我无法让它适用于 Babel 7 和 Webpack 4。生成的源映射反映了 TypeScript 编译器的转译输出，而不是源文件。

【解决方案2】：

老问题，但如果其他人遇到此问题，请尝试在 webpack 配置中将 devtool 设置为不同的值，例如：

devtool: 'inline-cheap-module-source-map'

每个设置的预期输出： https://webpack.js.org/configuration/devtool/#root

【讨论】：