如何在浏览器中使用 Systemjs 使用 TypeScript module:system 导出

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

如何在浏览器中使用 Systemjs 使用 TypeScript module:system 导出

How to consume TypeScript module:system export with systemjs in browser

typescript

systemjs