Question

当我尝试在浏览器中运行应用程序时，我在调试控制台窗口中看到以下消息：

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。我看不出复制之前和之后有任何区别。怪异。

Answer 1

当您希望通过RequireJS加载TypeScript编译器的输出时使用<script src="https://www.gstatic.com/firebasejs/3.6.1/firebase.js"></script> <script> function init(){ var config = { apiKey: "<asdf>", authDomain: "<asdf>.firebaseapp.com", databaseURL: "<asdf>.firebaseio.com" }; firebase.initializeApp(config); } </script> <script src="https://www.gstatic.com/firebasejs/3.6.1/firebase-app.js"></script> <script src="https://www.gstatic.com/firebasejs/3.6.1/firebase-auth.js"></script> <script src="https://www.gstatic.com/firebasejs/3.6.1/firebase-database.js"></script>，这绝对是错误的。您应该使用"module": "commonjs"。（您可能需要将目标更改回"module": "amd"。）

您得到的错误是因为使用es5，编译器将为您的"module": "commonjs"输出与此类似的代码：

import {Person} from "./Person"

对var _Person = require("./Person"); var Person = _Person.Person;的调用将导致RequireJS执行但由于RequireJS不直接支持此类代码，因此会失败。如果它在require中，则上面的代码可以工作：

define

当您使用define(function (require) { var _Person = require("./Person"); var Person = _Person.Person; // Rest of the module. });时，编译器会生成与此代码段类似的代码，并且它可以正常工作。

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

1 个答案: