TypeScript export and import Module name has not b

2019-03-02 12:24发布

站内文章 / JavaScript
11 0 0

问题:

When I try to run the application in the browser I get in the debug console window the following message:

Module name "Person" has not been loaded yet for context: _. Use require([])

Of course if merge the content of the .ts files all is working perfectly.

I create the Person.ts file:

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');
    }
}

and the app.ts file:

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;

and last my index.html file:

<!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>

and last my tsconfig.json file:

{
    "compilerOptions": {
        "module": "commonjs",
        "noImplicitAny": true,
        "removeComments": true,
        "preserveConstEnums": true,
        "sourceMap": true,
        "target": "es6"
    },
    "files": [
        "app.ts",
        "Person.ts"
    ]
}

I tried at first to transpile with target es5 and then I moved to es6 (and last moved to the tsconfig.json file)

Update

I did like @Louis and it seems to work - copied all files from my question and only edited tsconfig.json to hold amd and es5. I couldn`t see any difference between the before and after the copy. Weird.

回答1:

Using "module": "commonjs" when you want the output of the TypeScript compiler to be loaded by RequireJS, is definitely wrong. You should use "module": "amd". (You may need to change change your target back to es5 too.)

The error you get is because with "module": "commonjs", the compiler will output code similar to this for your import {Person} from "./Person":

var _Person = require("./Person");
var Person = _Person.Person;

The call to require will cause RequireJS to execute but that will fail because RequireJS does not support such code directly. The code above would work if it is in a define like this:

define(function (require) {
    var _Person = require("./Person");
    var Person = _Person.Person;

    // Rest of the module.
});

When you use "module": "amd", the compiler produces code similar to this snippet and it works.



标签： javascript typescript requirejs
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~