尚未为上下文加载 TypeScript 导出和导入模块名称:_。使用要求([])
TypeScript export and import Module name has not been loaded yet for context: _. Use require([])
当我尝试 运行 浏览器中的应用程序时,我在调试控制台 window 中收到以下消息:
Module name "Person" has not been loaded yet for context: _. Use require([])
当然,如果合并 .ts 文件的内容,则一切正常。
我创建 Person.ts
文件:
export interface IPerson {
firstName: string;
lastName: string;
}
export class Person implements IPerson {
private _middleName: string;
public set middleName(value: string) {
if (value.length <= 0)
throw "Must supply person name";
this._middleName = value;
}
public get middleName(): string {
return this._middleName;
}
constructor(public firstName: string, public lastName: string) { };
Validate() {
alert('test');
}
}
和 app.ts
文件:
import {Person} from "./Person"
class Employee extends Person {
Validate() {
alert('new test inside Employee');
}
}
let p1 = new Person("Shahar", "Eldad");
p1.Validate();
try {
p1.middleName = "";
}
catch (err) {
alert(err);
}
let p2 = new Employee("Shahar", "Eldad");
p2.Validate();
document.body.innerHTML = p1.firstName + " " + p2.lastName;
最后我的 index.html
文件:
<!DOCTYPE html>
<html>
<head>
<meta charset="windows-1255">
<title>Insert title here</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.2/require.min.js" data-main="app.js"></script>
</head>
<body>
</body>
</html>
最后我的 tsconfig.json
文件:
{
"compilerOptions": {
"module": "commonjs",
"noImplicitAny": true,
"removeComments": true,
"preserveConstEnums": true,
"sourceMap": true,
"target": "es6"
},
"files": [
"app.ts",
"Person.ts"
]
}
我首先尝试使用目标 es5 进行转译,然后我转移到 es6(最后转移到 tsconfig.json 文件)
更新
我确实喜欢@Louis,它似乎有效 - 从我的问题中复制了所有文件,只编辑了 tsconfig.json 以保存 amd 和 es5。我看不出复制前后有什么区别。奇怪。
当您希望 RequireJS 加载 TypeScript 编译器的输出时使用 "module": "commonjs"
肯定是错误的。你应该使用 "module": "amd"
。 (您可能还需要将目标更改回 es5
。)
您得到的错误是因为使用 "module": "commonjs"
,编译器将为您的 import {Person} from "./Person"
:
输出类似的代码
var _Person = require("./Person");
var Person = _Person.Person;
对require
的调用将导致RequireJS 执行但会失败,因为RequireJS 不直接支持此类代码。如果上面的代码在 define
中,则可以正常工作:
define(function (require) {
var _Person = require("./Person");
var Person = _Person.Person;
// Rest of the module.
});
当您使用 "module": "amd"
时,编译器会生成类似于此代码段的代码并且它可以运行。
当我尝试 运行 浏览器中的应用程序时,我在调试控制台 window 中收到以下消息:
Module name "Person" has not been loaded yet for context: _. Use require([])
当然,如果合并 .ts 文件的内容,则一切正常。
我创建 Person.ts
文件:
export interface IPerson {
firstName: string;
lastName: string;
}
export class Person implements IPerson {
private _middleName: string;
public set middleName(value: string) {
if (value.length <= 0)
throw "Must supply person name";
this._middleName = value;
}
public get middleName(): string {
return this._middleName;
}
constructor(public firstName: string, public lastName: string) { };
Validate() {
alert('test');
}
}
和 app.ts
文件:
import {Person} from "./Person"
class Employee extends Person {
Validate() {
alert('new test inside Employee');
}
}
let p1 = new Person("Shahar", "Eldad");
p1.Validate();
try {
p1.middleName = "";
}
catch (err) {
alert(err);
}
let p2 = new Employee("Shahar", "Eldad");
p2.Validate();
document.body.innerHTML = p1.firstName + " " + p2.lastName;
最后我的 index.html
文件:
<!DOCTYPE html>
<html>
<head>
<meta charset="windows-1255">
<title>Insert title here</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.2/require.min.js" data-main="app.js"></script>
</head>
<body>
</body>
</html>
最后我的 tsconfig.json
文件:
{
"compilerOptions": {
"module": "commonjs",
"noImplicitAny": true,
"removeComments": true,
"preserveConstEnums": true,
"sourceMap": true,
"target": "es6"
},
"files": [
"app.ts",
"Person.ts"
]
}
我首先尝试使用目标 es5 进行转译,然后我转移到 es6(最后转移到 tsconfig.json 文件)
更新
我确实喜欢@Louis,它似乎有效 - 从我的问题中复制了所有文件,只编辑了 tsconfig.json 以保存 amd 和 es5。我看不出复制前后有什么区别。奇怪。
当您希望 RequireJS 加载 TypeScript 编译器的输出时使用 "module": "commonjs"
肯定是错误的。你应该使用 "module": "amd"
。 (您可能还需要将目标更改回 es5
。)
您得到的错误是因为使用 "module": "commonjs"
,编译器将为您的 import {Person} from "./Person"
:
var _Person = require("./Person");
var Person = _Person.Person;
对require
的调用将导致RequireJS 执行但会失败,因为RequireJS 不直接支持此类代码。如果上面的代码在 define
中,则可以正常工作:
define(function (require) {
var _Person = require("./Person");
var Person = _Person.Person;
// Rest of the module.
});
当您使用 "module": "amd"
时,编译器会生成类似于此代码段的代码并且它可以运行。