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
.
无法将 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
.