javascript - ¿Cómo deshacerse de la propiedad "default" al cargar módulos con SystemJS?

Tengo un módulo AMD que quiero cargar con SystemJS. Puedo hacerlo, pero desafortunadamente tengo que llamarlo así:

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

Me gustaría omitir hacer una llamada a .default, pero no sé cómo deshacerme de esta propiedad. Creo que este default está de alguna manera asignado por el cargador SystemJS.

Este es mi módulo:

logdown.js

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

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

  return Logdown;
});

Y aquí está mi configuración de SystemJS:

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

Respuesta #1

Resumen

Usa la sintaxis import ... from "..."; en lugar de import ...=require("..."); al usar módulos AMD nombrados en código TypeScript.

Explicación

Mi aplicación principal (que utiliza el módulo Logdown) está escrita en TypeScript y compilada a código ES5. Con esta configuración, noté que hay una diferencia en la salida dependiendo de la sintaxis de importación de TypeScript utilizada.

Aquí están las diferencias:

import Logdown from "logdown";

export default class Main {

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

Compila a:

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);
    }
  }
});

Y :

import Logdown = require("logdown");

export default class Main {

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

Compila a:

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);
        }
    }
});

La parte importante es que al usar import Logdown from "logdown";, el código TypeScript compilado creará nuevas instancias así var logger=new logdown_1.default('Test');.

Pero al usar import Logdown=require("logdown");, el código TypeScript compilado no agrega una propiedad default, sino que en su lugar crea instancias así: var logger=new Logdown('Test');.

Entonces, con el tipo de módulo que tengo (un módulo AMD con nombre), necesito usar la sintaxis import ... from "...";.

Respuesta #2

Cuando se hacía el empaquetado con webpack antes, solo podías añadir la propiedad esModule con el valor de false a la configuración de los loaders (si se soportaba).

Por ejemplo, con el html-loader, sigue: https://webpack.js.org/loaders/html-loader/#esmodule