繁体   English   中英

尚未为上下文_加载TypeScript导出和导入模块名称。 使用require([])

[英]TypeScript export and import Module name has not been loaded yet for context: _. Use require([])

当我尝试在浏览器中运行应用程序时,在调试控制台窗口中出现以下消息:

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" ,编译器会生成与此代码段相似的代码,并且可以正常工作。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM