systemjs導入錯誤

Question

我正在嘗試在客戶端和服務器中使用現有的js庫（ validate.js ）。

我使用npm安裝它，所有內容都編譯為服務器和客戶端。
在服務器中使用它時效果很好，但是當我在瀏覽器中執行它時會拋出錯誤。

在這兩種情況下都使用相同的文件：

import validate = require("validate.js");

export function RequestValidator(data: any): any {
    return (validate as any)(data, constraints, { allowEmpty: true });
}

validate是斷言any因為否則我得到：

TS2349：無法調用類型缺少調用簽名的表達式。

我正在使用的.d.ts是：

declare module "validate.js" {
    export interface ValidateJS {
        (attributes: any, constraints: any, options?: any): any;
        async(attributes: any, constraints: any, options?: any): Promise<any>;
        single(value: any, constraints: any, options?: any): any;
    }

    export const validate: ValidateJS;
    export default validate;
}

該模塊只導出一個函數，並且在服務器中運行良好，但在客戶端調用此函數時，我得到：

Uncaught TypeError: validate is not a function(…)

使用服務器的目標commonjs編譯代碼：

"use strict";
const validate = require("validate.js");
...

和客戶system ：

System.register(["validate.js"], function(exports_1, context_1) {
    "use strict";
    var __moduleName = context_1 && context_1.id;
    var validate;
    ...

    return {
        setters:[
            function (validate_1) {
                validate = validate_1;
            }],
    ...

在調試它時， validate確實不是一個函數：

validate: r
    EMPTY_STRING_REGEXP: (...)
    get EMPTY_STRING_REGEXP: function()
    set EMPTY_STRING_REGEXP: function()
    Promise: (...)
    get Promise: function()
    set Promise: function()
    __useDefault: (...)
    get __useDefault: function()
    set __useDefault: function()
    async: (...)
    get async: function()
    set async: function()
    capitalize: (...)
    get capitalize: function()
    set capitalize: function()
    cleanAttributes: (...)
    get cleanAttributes: function()
    set cleanAttributes: function()
    ...

知道發生了什么以及為什么它在瀏覽器中以這種方式運行？

Answer 1

使用"module": "system"編譯時"module": "system" ，節點兼容導入

import validate = require("validate.js");

不再有效 - 您獲得validate的價值是一個模塊，而不是一個功能。 這可能是打字稿中的錯誤，或者可能是設計 - 我不知道。 （更新：從github注釋到JsonFreeman 這里 ，它看起來像是設計的： you get the module object with a set of properties including one named default ）。

有幾種方法可以解決這個問題。

首先，您可以自己輕松進行轉換 - 您需要的功能作為模塊的default屬性提供，因此該行將修復它：

validate = validate.default ? validate.default : validate;

或者，您可以使用"module": "commonjs"編譯"module": "commonjs"甚至是瀏覽器，因此typescript將生成工作代碼，systemjs將自動檢測模塊的格式。

或者最后，您仍然可以使用"module": "system"編譯"module": "system" ，但導入validate.js因為它的打算是：

import validate from 'validate.js';

這樣，你不必做任何強制轉換到any ，和打字稿將生成必要的訪問default屬性，但缺點是，它不會在所有的節點導入這種方式時工作。