使用 SystemJS 加载模块时如何摆脱 "default" 属性？

Question

我有一个 AMD module which I want to load with 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'
  }
});

Answer 1

TL;DR

在 TypeScript 代码中使用 named AMD modules 时，请使用 import ... from "..."; 语法而不是 import ... = require("...");。

说明

我的主要应用程序（使用 Logdown 模块）是用 TypeScript 编写并编译为 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');.

所以对于我拥有的模块类型 (a named AMD module)，我需要使用 import ... from "..."; synatx。

Answer 2

之前与 webpack 捆绑时，您可以将值为 false 的 esModule 属性添加到加载程序配置（如果支持）。

例如，使用 html-loader，遵循：https://webpack.js.org/loaders/html-loader/#esmodule

使用 SystemJS 加载模块时如何摆脱 "default" 属性？

How to get rid off the "default" property when loading modules with SystemJS?

javascript

amd

typescript

systemjs

es6-module-loader