Babel7 + ts-loader产生错误的源映射

Question

我在babel-loader，ts-loader，webpack配置中生成源映射有问题。

问题是源地图是由已经由babel编译的文件生成的。所以改为原始文件（仅限顶部）：

declare var window: any;
declare var PRODUCTION: any;
import * as React from "react";
import { TextFilter } from "./Filters";
import { ColumnHelper } from "./table/ColumnHelper";
import FiltersPresenter from "./table/FiltersPresenter";
import Tbody from "./table/Tbody";
import Footer from "./table/Footer";
import { ICellTemplate, IColumnData, IFilterValue, IOrder } from "./table/Interfaces";
import { EmptyResult, Error, Loading } from "./table/placeholders";
import { deepCopy } from "frontend/src/lib/JSONTools";
import Thead from "frontend/src/ctrl/table/Thead";
import Comm from "frontend/src/lib/Comm";
import { Datasource } from "frontend/src/lib/Datasource";

interface IDataQuery {}

interface ITableDataInput {
    data: any[];
    countAll?: number;
    debug?: string;
    decorator?: (requestData: IDataQuery, data: ITableDataInput) => ITableDataInput | Promise<ITableDataInput>;
}

type IDataProvider = (requestData: IDataQuery) => ITableDataInput | Promise<ITableDataInput>;

在源地图中，我看到像这样的smth：

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
Object.defineProperty(exports, "ColumnHelper", {
  enumerable: true,
  get: function () {
    return _ColumnHelper.ColumnHelper;
  }
});
Object.defineProperty(exports, "Column", {
  enumerable: true,
  get: function () {
    return _ColumnHelper.ColumnHelper;
  }
});
exports.Table = void 0;

var React = _interopRequireWildcard(require("react"));

var _Filters = require("./Filters");

var _ColumnHelper = require("./table/ColumnHelper");

var _FiltersPresenter = _interopRequireDefault(require("./table/FiltersPresenter"));

var _Tbody = _interopRequireDefault(require("./table/Tbody"));

var _Footer = _interopRequireDefault(require("./table/Footer"));

var _placeholders = require("./table/placeholders");

var _JSONTools = require("frontend/src/lib/JSONTools");

var _Thead = _interopRequireDefault(require("frontend/src/ctrl/table/Thead"));

var _Comm = _interopRequireDefault(require("frontend/src/lib/Comm"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }

(function () {
  var enterModule = require('react-hot-loader').enterModule;

  enterModule && enterModule(module);
})();

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

class Table extends React.Component {

Webpack配置（在happypack目标中）：

new HappyPack({
            id: "tsx",
            loaders: [
                {
                    path: "ts-loader",
                    query: {
                        happyPackMode: true,
                        transpileOnly: true,
                    },
                },
                {
                    loader: "babel-loader",
                    options: {
                        presets: [
                            [
                                "@babel/preset-env",
                                {
                                    targets: {
                                        browsers: "last 2 Chrome versions",
                                        node: "current",
                                    },
                                },
                            ],
                            "@babel/typescript",
                            "@babel/react",
                        ],

                        plugins: [
                            "@babel/plugin-syntax-typescript",
                            "@babel/plugin-syntax-decorators",
                            "@babel/plugin-syntax-jsx",
                            "@babel/plugin-syntax-dynamic-import",
                            "@babel/proposal-class-properties",
                            "@babel/proposal-object-rest-spread",
                            "react-hot-loader/babel",

                        ],
                    },
                },
            ],
            threadPool: threads,
        }),

任何人都知道如何将原始文件内容传递给source-map？