如何在使用SystemJS加載模塊時擺脫「默認」屬性？

我有一個AMD module，我想加載SystemJS。我能做到這一點，但不幸的是我不得不這樣稱呼它：如何在使用SystemJS加載模塊時擺脫「默認」屬性？

var Logdown = module.default; 
var instance = new Logdown('Test');

我想跳過撥打電話到.default，但我不知道如何擺脫掉這個屬性。我認爲這個default是由SystemJS加載程序以某種方式分配的。

這是我的模塊：

logdown.js

define('Logdown', function() { 
    function Logdown(name) { 
    this.name = name; 
    } 

    Logdown.prototype.log = function() { 
    console.log(this.name); 
    }; 

    return Logdown; 
});

這裏是我的SystemJS配置：

SystemJS.config({ 
    baseURL: '/dist', 
    map: { 
    'logdown': 'lib/dynamic/logdown/logdown.js' 
    } 
});

來源

2016-10-20 Benny Neugebauer

您在logdown.js中所擁有的內容在您鏈接的[AMD規格]（http://requirejs.org/docs/whyamd.html#namedmodules）中稱爲'命名模塊'，並且該文檔顯示「您應該避免自己命名模塊，並且在開發過程中只將一個模塊放在一個文件中，但對於工具和性能，模塊解決方案需要一種方法來識別構建資源中的模塊。對於SystemJS，在'logdown.js'中命名模塊將該文件轉換爲一個包，而不是一個模塊。如果沒有看到導入該模塊的完整源代碼，您的問題就無法回答。 – artem

感謝您的澄清，artem。☺ –

'default'不是由模塊加載器創建的，而是由導出聲明創建的。 – Bergi

TL; DR

使用當在TypeScript代碼中使用named AMD modules時，使用語法代替import ... = require("...");。

說明

我的主應用程序（使用Logdown模塊）寫入打字稿和編譯爲ES5代碼。通過這個設置，我注意到輸出的不同取決於所使用的TypeScript導入語法。

差別如下：

import Logdown from "logdown"; 

export default class Main { 

    constructor(message: string) { 
    let logger: Logdown = new Logdown('Test'); 
    logger.log(); 
    } 
}

編譯爲：

System.register(["logdown"], function(exports_1, context_1) { 
    "use strict"; 
    var __moduleName = context_1 && context_1.id; 
    var logdown_1; 
    var Main; 
    return { 
    setters: [ 
     function(logdown_1_1) { 
     logdown_1 = logdown_1_1; 
     }], 
    execute: function() { 
     Main = (function() { 
     function Main(message) { 
      var logger = new logdown_1.default('Test'); 
      logger.log(); 
     } 

     return Main; 
     }()); 
     exports_1("default", Main); 
    } 
    } 
});

和：

import Logdown = require("logdown"); 

export default class Main { 

    constructor(message: string) { 
    let logger: Logdown = new Logdown('Test'); 
    logger.log(); 
    } 
}

編譯爲：

System.register(["logdown"], function(exports_1, context_1) { 
    "use strict"; 
    var __moduleName = context_1 && context_1.id; 
    var Logdown; 
    var Main; 
    return { 
     setters:[ 
      function (Logdown_1) { 
       Logdown = Logdown_1; 
      }], 
     execute: function() { 
      Main = (function() { 
       function Main(message) { 
        var logger = new Logdown('Test'); 
        logger.log(); 
       } 
       return Main; 
      }()); 
      exports_1("default", Main); 
     } 
    } 
});

重要的部分是當使用import Logdown from "logdown";時，編譯的TypeScript代碼將創建像這樣的新實例var logger = new logdown_1.default('Test');。

但是，當使用import Logdown = require("logdown");時，編譯後的TypeScript代碼不會添加default屬性，而是會創建如下所示的實例：var logger = new Logdown('Test');。

因此，隨着模塊類型我有（一個named AMD module），我需要使用import ... from "..."; synatx。

來源

2016-10-21 09:29:59

如何在使用SystemJS加載模塊時擺脫「默認」屬性？

回答

相關問題