javascript - 没有 'new'不能调用类构造函数

意识到这个问题已经被问过几次了，但是我遇到的几乎所有情况都是有人试图扩展非 native 类的情况。我的情况是不同的。我有一个非常简单的基类CObject，如下所示:

export class CObject extends BaseObject {
    constructor() {
        super();
    }
    static url(path: string): string { return ""; }
    static wssUrl(): string { return ""; }
    static callMethod(method, path: string, params: any, noConvertData?: boolean): Promise<any> { return null; }
    static post(path: string, params: any, noConvertData?: boolean): Promise<any> {
        return CObject.callMethod('post', path, params, noConvertData);
    }

    static put(path: string, params: any, noConvertData?: boolean): Promise<any> {
        return CObject.callMethod('put', path, params, noConvertData);
    }

    static patch(path: string, params: any, noConvertData?: boolean): Promise<any> {
        return CObject.callMethod('patch', path, params, noConvertData);
    }

    static get(path: string, params: any, noConvertData?: boolean): Promise<any> {
        return CObject.callMethod('get', path, params, noConvertData);
    }

    static delete(path: string, params: any, noConvertData?: boolean): Promise<any> {
        return CObject.callMethod('delete', path, params, noConvertData);
    }
}

包括BaseObject在内的整个类层次结构只是简单的Typescript类。但是，当我从CObject扩展一个类然后尝试实例化它时，我得到了这个可怕的错误(现在4天!)。有趣的是，我可以自己实例化CObject而没有任何问题。只是派生类导致了问题，甚至像这样的空类:

export class TestClass extends CObject {
    constructor() {
        super();
    }
}

需要注意的一点是，此代码在我的服务器(Node.js)和客户端之间共享。该代码在服务器端运行良好。没问题。
我尝试查看babel生成的代码，它只是简单的ES6类。所有其他TS生成的类均能正常工作，并且在调用CObject构造函数时，CObject下的所有内容均失败。

我的.babelrc文件如下:

{
    "presets": [
        "es2015-node5",
        "react",
        "stage-0",
        "stage-1",
        "bluebird"
    ],
    "plugins": [
        "transform-decorators-legacy",
        "react-hot-loader/babel",
        "transform-async-to-bluebird",
        "transform-promise-to-bluebird",
        "transform-runtime",
        [
            "module-alias",
            [
                { "src": "./build/Server", "expose": "Server" },
                { "src": "./build/Shared", "expose": "Shared" },
                { "src": "./build/Client", "expose": "Client" }
            ]
        ]
    ],
    "compact": "false"
}`

对于客户端编译，我在tsconfig.json中的awesome-typescript-loader配置如下:

编辑:我在看错误的ATL配置。完整的配置如下:

"awesomeTypescriptLoaderOptions": {
    "babelrc": true,
    "useBabel": true,
    "useWebpackText": true,
    "useTranspileModule": true,
    "doTypeCheck": true,
    "forkChecker": true,
    "presets": ["env", { "targets": "last 2 versions, ie 11", "modules": false }, { "exclude": ["transform-es2015-classes"] } ],
    "babelOptions": {
        "sourceMaps": true
    },
    "useCache": true
}

客户端的webpack配置如下:

var path = require('path');
var webpack = require('webpack');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

let outputDir = path.join(__dirname, "..", "dist", "Client");
console.log(`Output: ${outputDir}`);

module.exports = {
    entry: "./src/Client/Browser/Src/Main.tsx",
    output: {
        filename: "client.js",
        path: outputDir
    },
    target: 'web',

    // Enable sourcemaps for debugging webpack's output.
    devtool: "source-map",

    resolve: {
        // Add '.ts' and '.tsx' as resolvable extensions.
        extensions: [".ts", ".tsx", ".js", ".json"],
        plugins: [new TsconfigPathsPlugin({ configFile: "./tsconfig.json" })],
        modules: [
            "./node_modules",
            "./src/Shared",
            "./src/Client"
        ]
    },

    module: {
        rules: [
            // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
            { test: /\.tsx?$/, loader: "awesome-typescript-loader" },

            // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
            { enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
        ]
    }
};

任何帮助将不胜感激。谢谢你。

编辑:确切的错误是:

ConfigSection.ts?26cc:18 Uncaught TypeError: Class constructor CObject cannot be invoked without 'new'
    at new ConfigSection (ConfigSection.ts?26cc:18)
    at Object../src/Shared/Model/Config/ShAlpha.ts (ShAlpha.ts:338)
    at __webpack_require__ (bootstrap:19)

最佳答案

好的，感谢Oscar Paz，我得以解决此问题。原来，罪魁祸首是我的ATL配置:

"awesomeTypescriptLoaderOptions": {
    "babelrc": true,
    "useBabel": true,
    "useWebpackText": true,
    "useTranspileModule": true,
    "doTypeCheck": true,
    "forkChecker": true,
    "presets": ["env", { "targets": "last 2 versions, ie 11", "modules": false }, { "exclude": ["transform-es2015-classes"] } ],
    "babelOptions": {
        "sourceMaps": true
    },
    "useCache": true
}

更具体地说，这一行:

    "presets": ["env", { "targets": "last 2 versions, ie 11", "modules": false }, { "exclude": ["transform-es2015-classes"] } ],

即使我设置了:

    "babelrc": true,

期望使用.babelrc，这就是用于Node.js代码的内容。这导致生成了从CObject派生的类的多个定义(ES6和ES5)。所以CObject正确生成了:

let CObject = exports.CObject = class CObject extends _BaseObject.BaseObject {} ...

ConfigSection的第一个定义也已正确生成:

let ConfigSection = ConfigSection_1 = class ConfigSection extends Shared_Core_CObject__WEBPACK_IMPORTED_MODULE_1__["CObject"] {} ...

但是再往下走:

var ConfigSection = ConfigSection_1 = function (_CObject) {
    (0, _inherits3.default)(ConfigSection, _CObject); ...

这是导致错误的原因。我不知道为什么ATL不忽略这些选项以及为什么这些选项会导致这种代码生成。也许，具有更好理解的人可以阐明一些想法。

cObject

javascript - 没有 'new'不能调用类构造函数