如何在使用SystemJS加载模块时去除“default”属性？

Question

我有一个AMD模块，我想用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'
  }
});

- Benny Code

---

在logdown.js中，你所拥有的被称为“命名模块”在你提供的AMD规范中，该文档表示：“你应该避免自己命名模块，在开发时只放置一个模块在一个文件中。然而，对于工具和性能，模块解决方案需要一种方式来识别内置资源中的模块。” 对于SystemJS，在logdown.js中拥有命名模块将该文件转换为捆绑包而不是模块。如果没有看到导入该模块的完整源代码，无法回答你的问题。 - artem

感谢您的澄清，Artem。☺ - Benny Code

default 不是由模块加载器创建的，而是由导出声明创建的。 - Bergi

Answer 1

TL;DR

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

Explanation

我的主要应用程序（使用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');。

因此，对于我所拥有的模块类型（一个 named AMD module），我需要使用 import ... from "..."; 语法。

- Benny Code

Answer 2

在以前使用webpack进行打包时，你可以在加载器配置中添加esModule属性，并将其值设置为false（如果支持的话）。

例如，在使用html-loader时，请参考：https://webpack.js.org/loaders/html-loader/#esmodule

- Marco Klein