如何使用源映射调试模块化TypeScript? [英] How can I debug modular TypeScript with source maps?
问题描述
我想尝试在Chrome Dev Tools中进行TypeScript调试工作的时间太短了.我已经为所有.ts文件生成了源映射，并且javascript看起来正确，但是Chrome仅加载index.html中引用的js文件，并且忽略了所有模块.这种说法是有道理的，因为Typescript编译器似乎对我的模块没有做任何事情.如果在下面的示例中有人可以解释我在做什么错，那太好了.
I am having an impossible time trying to get TypeScript debugging working in Chrome Dev Tools. I've generated source maps for all my .ts files, and the javascript looks correct, but Chrome only loads the js file that is referenced in index.html and ignores all the modules. This kinda makes sense, because the Typescript compiler does not seem to be doing anything with my modules. If someone could explain what I'm doing wrong in the following example, that would be great.
我的项目设置如下:
root/
src/
Company.ts
User.ts
app.ts
index.html
Company.ts
module Company {
export class Job {
public title:string;
public description:string;
constructor(title:string, desc:string){
this.title = title;
this.description = desc;
};
}
}
User.ts
///<reference path="Company.ts"/>
module User {
export class Person {
public first:string;
public last:string;
private myJob:Company.Job;
private myAccount:User.Account;
constructor(firstName:string, lastName:string){
this.first = firstName;
this.last = lastName;
}
public getName():string{
return this.first + ' ' + this.last;
}
public setJob(job:Company.Job){
this.myJob = job;
}
public setAccount(acct:User.Account){
this.myAccount = acct;
}
public toString():string{
return "User: " + this.getName()
+ "\nUsername: " + this.myAccount.userName
+ "\nJob: " + this.myJob.title;
}
}
export class Account {
public userName:string;
private _password:string;
constructor(user:Person){
this.userName = user.first[0] + user.last;
this._password = '12345';
}
}
}
app.ts
///<reference path="src/User.ts"/>
///<reference path="src/Company.ts"/>
(function go(){
var user1:User.Person = new User.Person('Bill','Braxton');
var acct1:User.Account = new User.Account(user1);
var job1:Company.Job = new Company.Job('Greeter','Greet');
user1.setAccount(acct1);
user1.setJob(job1);
console.log(user1.toString());
}());
index.html
<!DOCTYPE html>
<html>
<head>
<title>TypeScript Test</title>
<script src="app.js"/>
<script>
go();
</script>
</head>
<body>
</body>
</html>
编译器命令
tsc --sourcemap --target ES5 --module commonjs file.ts
tsc --sourcemap --target ES5 --module commonjs file.ts
当我在Chrome中打开index.html并打开源"面板Chrome开发工具时，它将显示app.js和app.ts，但不会显示其他.ts模块.因此，app.ts的源映射正在运行，但是如何加载其他模块，以便可以在Chrome中对其进行调试?
When I open index.html in Chrome and open the Sources panel Chrome Dev Tools, it will show me app.js and app.ts, but not the other .ts modules. So the source map for app.ts is working, but how do I load the other modules so they can be debugged in Chrome?
推荐答案
使用参考注释时，您必须自己加载所有模块(即，添加多个脚本标签，或者合并并缩小文件等).
When you use reference comments, you have to load all of the modules yourself (i.e. add multiple script tags, or combine and minify the files etc).
如果要使用模块加载器，则需要使用import语句，该语句将转换为对所选模块加载器的require方法调用(对于Web可能是RequireJS).
If you want to use a module loader, you need to use import statements, which will be converted into require method calls for the module loader of your choice (probably RequireJS for the web).
示例1-DIY
<script src="/src/Company.js"></script>
<script src="/src/User.js"></script>
<script src="app.js"></script>
示例2-RequireJS
Example 2 - RequireJS
src/Company.ts
export class Job {
public title: string;
public description: string;
constructor(title: string, desc: string) {
this.title = title;
this.description = desc;
}
}
请注意，我已经删除了module声明.使用RequireJS ...导入模块时，文件名即成为模块名.
Note that I have removed the module declaration. The file name becomes the module name when you are importing the modules using RequireJS...
src/User.ts
import company = module('Company');
export class Account {
public userName: string;
private _password: string;
constructor(user: Person) {
this.userName = user.first[0] + user.last;
this._password = '12345';
}
}
export class Person {
public first: string;
public last: string;
private myJob: company.Job;
private myAccount: Account;
constructor(firstName: string, lastName: string) {
this.first = firstName;
this.last = lastName;
}
public getName(): string {
return this.first + ' ' + this.last;
}
public setJob(job: company.Job) {
this.myJob = job;
}
public setAccount(acct: Account) {
this.myAccount = acct;
}
public toString(): string {
return "User: " + this.getName()
+ "\nUsername: " //+ this.myAccount.userName
+ "\nJob: " + this.myJob.title;
}
}
此处有几处更改-我们有import语句，而不是指向文件的注释.我们在这里也引用了Account而不是User.Account.再次，封闭模块消失了，就像文件是模块一样.
A couple of changes here - we have the import statement rather than a comment that points to the file. We also reference Account in here rather than User.Account. Again, the enclosing module is gone as the file is the module.
app.ts
import Company = module('src/Company');
import User = module('src/User');
(function go() {
var user1: User.Person = new User.Person('Bill', 'Braxton');
var acct1: User.Account = new User.Account(user1);
var job1: Company.Job = new Company.Job('Greeter', 'Greet');
user1.setAccount(acct1);
user1.setJob(job1);
console.log(user1.toString());
} ());
再次在此处导入语句.附带说明一下，go函数看起来可以立即执行，因此您无需手动再次调用它-您可以删除函数名称以防止意外执行.
Import statements again here. As a side note, the go function looks to be immediately executing, so you shouldn't need to call it a second time manually - you could remove the function name to stop this being done by accident.
Index.html
<script data-main="app.js" src="require.js"></script>
您需要在项目中包含RequireJS脚本.您只需要将其指向您的第一个文件，它将加载其余所有文件.您会在编译的JavaScript中注意到，您的import语句已转换为对RequireJS require函数的调用:
You need to include the RequireJS script in your project. You only need to point it at your first file and it will load all the rest. You'll notice in your compiled JavaScript that your import statements get converted into calls to the RequireJS require function:
var Company = require("./src/Company");
var User = require("./src/User");
这会触发RequireJS为您加载脚本.
This triggers RequireJS to load the script for you.
您还可以手动使用RequireJS如果您想要更多的控制权(即直接使用require方法而不是使用import语句.
You can also use RequireJS manually if you want more control (i.e. use the require method directly rather than using import statements.
这篇关于如何使用源映射调试模块化TypeScript?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
