typescript - 如何使用 TypeScript 模块 :system export with systemjs in browser

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 ...

“SolarPopup”在这里是一个模块名称。 SystemJS 将此类文件解释为 bundle, not a module .

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

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

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