SystemJS 未导入

SystemJS is not importing

无法将 Typescript 与 SystemJS 一起使用。这是我的测试示例:


tsconfig.json

{
  "compilerOptions": {
    "module": "System",
    "target": "es2015",
    "outFile": "./lib/mylib.js"
  },

  "include": [
    "./src/mylib.ts"
  ]
}

lib/mylib.ts

export default class MyClass {
    constructor(public readonly msg: string) { }

    public print() {
        console.log(this.msg)
    }
}

test.html

<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.3.1/system.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.3.1/extras/named-register.js"></script>
    <script src="lib/mylib.js"></script>
    <script src="test.js"></script>
</head>
<body>
</body>
</html>

lib/mylib.js

System.register("mylib", [], function (exports_1, context_1) {
    "use strict";
    var MyClass;
    var __moduleName = context_1 && context_1.id;
    return {
        setters: [],
        execute: function () {
            MyClass = class MyClass {
                constructor(msg) {
                    this.msg = msg;
                }
                print() {
                    console.log(this.msg);
                }
            };
            exports_1("default", MyClass);
        }
    };
});

test.js

System.import('mylib').then(() => {
    let mc = new MyClass('My message')
    mc.print()
})

出现错误:test.js:2 Uncaught (in promise) ReferenceError: MyClass is not defined at test.js:2

我尝试使用 SystemJS,因为我需要在本地加载 MyClass(没有 CORS)。我会使用 ES6 模块,但本地不允许模块导入。

我能发现的唯一问题是浏览器将尝试在整个全局对象上搜索 MyClass 以查看它是否存储它。但是 SystemJS 动态加载模块并 returns 它们在 promise 中,因此您将像这样包含它:

System.import('mylib').then((importedObject) => {
  const MyClass = importedObject.default
  let mc = new MyClass('My message')
  mc.print()
})

这将简单地 Return 您 importedObject 然后您可以指定要使用的导入。在这种情况下,您希望使用默认导出,因为它存储您的 MyClass.