javascript - 没有 'new' 无法调用类构造函数

Question

感谢这个问题已被问过几次，但我遇到的几乎所有情况都是有人试图扩展非本地类的情况。我的情况不同。我有一个名为 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)

Answer 1

好的，感谢 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 不忽略这些选项以及为什么这些选项会导致这种代码生成。也许，有更好理解的人可以阐明一些问题。