如何使用TypeScript模块：在浏览器中使用systemjs进行系统导出

Question

我正在尝试使用systemjs，我已经用tsc导出了这段代码： https://github.com/quantumjs/solar-popup/blob/master/package.json#L10

{
  "compilerOptions": {
    "module": "system",
    "target": "es5",
    "sourceMap": true,
    "outFile":"./build/solar-popup.js",
    "sourceRoot": "./src/SolarPopup.ts",
    "rootDir": "./src/"

  },
  "exclude": [
    "node_modules"
  ]
}

然而，尝试在浏览器中使用它时，导入的对象不包含任何导出。我认为这是由于solar-popup.js不包含任何导出，只是System.register调用

导出如下：

System.register("SolarPopup", ["ModalBackground", "constants"], function (exports_4, context_4) {
    "use strict";
    var __moduleName = context_4 && context_4.id;
    var ModalBackground_1, constants_2, SolarPopup;
    return {
        setters: [
            function (ModalBackground_1_1) {
                ModalBackground_1 = ModalBackground_1_1;
            },
            function (constants_2_1) {
                constants_2 = constants_2_1;

等

Answer 1

在tsconfig.json

中有这两个选项时

"module": "system",
"outFile":"./build/solar-popup.js",

TypeScript生成包含多个System.register调用的单个输出文件，每个调用都注册一个具有自己名称的模块：

 System.register("SolarPopup", ["ModalBackground", "constants"], function ...

＆＃34; SolarPopup＆＃34;这是一个模块名称。 SystemJS将此类文件解释为bundle, not a module。

导入捆绑包的结果是一个空对象，副作用是内部的所有模块都已注册，并且可以立即导入以进行导入而无需获取它们。

因此，您需要额外的导入才能从捆绑包中获取模块。试试这个：

System.import('../build/solar-popup.js').then(function() {
    System.import('SolarPopup').then(function(SolarPopup) {
        console.dir(SolarPopup);
    });
});