ete*_*rps 3 google-chrome-devtools source-maps typescript
我正在尝试使用Chrome开发工具中的TypeScript调试工作.我为所有.ts文件生成了源映射,javascript看起来正确,但Chrome只加载index.html中引用的js文件并忽略所有模块.这有点意义,因为Typescript编译器似乎没有对我的模块做任何事情.如果有人可以在下面的例子中解释我做错了什么,那就太好了.
我的项目设置如下:
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
当我在Chrome中打开index.html并打开Sources面板Chrome Dev Tools时,它会显示app.js和app.ts,但不会显示其他.ts模块.所以app.ts的源地图正在运行,但是如何加载其他模块以便可以在Chrome中调试它们？
当您使用引用注释时,您必须自己加载所有模块(即添加多个脚本标记,或组合和缩小文件等).
如果要使用模块加载器,则需要使用import语句,这些语句将转换为您选择的模块加载器的require方法调用(可能是Web上的RequireJS).
例1 - DIY
<script src="/src/Company.js"></script>
<script src="/src/User.js"></script>
<script src="app.js"></script>
示例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导入模块时,文件名将成为模块名称...
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.同样,封闭模块已经消失,因为文件是模块.
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函数看起来立即执行,因此您不需要手动再次调用它 - 您可以删除函数名称以防止意外完成.
的index.html
<script data-main="app.js" src="require.js"></script>
您需要在项目中包含RequireJS脚本.您只需将它指向您的第一个文件,它将加载所有其余文件.您将在编译的JavaScript中注意到您的import语句被转换为对RequireJS require函数的调用:
var Company = require("./src/Company");
var User = require("./src/User");
这会触发RequireJS为您加载脚本.
如果需要更多控制,也可以手动使用RequireJS(即require直接使用方法而不是使用import语句.
| 归档时间： |
|
| 查看次数： |
3722 次 |
| 最近记录： |