在visual studio中使用typescript时,为什么我需要在default.htm中包含多个.js文件?

时间:2013-06-13 18:01:26

标签: javascript visual-studio visual-studio-2012 typescript

我刚刚开始使用打字稿。我想尝试在Visual Studio中使用this mankala example。最终我得到了它的工作,但我必须包含我的default.htm文件中从.ts文件生成的所有.js文件。示例中的.htm文件只包含一个文件 - 包含入口点的文件。我猜测我的配置中存在一些错误,我正在通过多个.js包含补偿。谁能告诉我我做错了什么?

更多细节如下......

这是原始.htm文件的样子:

<!DOCTYPE html>
<html>

<head>
  <title>Mankala</title>
  <meta http-equiv="X-UA-Compatible" content="IE=9"/>
  <script type="text/javascript" src="game.js"></script>
  <link rel="stylesheet" type="text/css" href="play.css"/>  
</head>
<body id="bod" onload="Mankala.testBrowser()">
   <div class="hscore">Human: <span id="humscore">0</span></div>
   <div class="cscore">Computer: <span id="compscore">0</span></div>
</body>
</html>

这就是我修改过的.htm文件的样子:

<!DOCTYPE html>
<html>

<head>
  <title>Mankala</title>
  <meta http-equiv="X-UA-Compatible" content="IE=9"/>
  <script type="text/javascript" src="base.js"></script>
  <script type="text/javascript" src="Driver.js"></script>
  <script type="text/javascript" src="Features.js"></script>
  <script type="text/javascript" src="Game.js"></script>
  <script type="text/javascript" src="geometry.js"></script>
  <script type="text/javascript" src="Position.js"></script>
  <link rel="stylesheet" type="text/css" href="play.css"/>  
</head>
<body id="bod" onload="Mankala.testBrowser()">
   <div class="hscore">Human: <span id="humscore">0</span></div>
   <div class="cscore">Computer: <span id="compscore">0</span></div>
</body>
</html>

要创建项目,我创建了一个默认(不是很空)的typescript项目,删除了该项目中自动创建的app.ts文件,然后添加了6个新的.ts文件,其名称与示例中的.ts文件相同。然后我将示例中的.ts文件复制到VS创建的新.ts文件中。我用示例中的play.css文件替换了自动生成的app.css文件,并将自动生成的default.htm文件的内容替换为示例中play.htm的内容。这没有运行,但是在我将其他.js文件添加到default.htm之后就确实如此。

我正在使用Visual Studio 2012 Express for the Web和typescript 0.8.3.1 VS扩展。我在windows7上使用Chrome浏览器。

1 个答案:

答案 0 :(得分:2)

这里的区别在于如何调用编译器。

当您构建Mankala示例时,假设您已阅读README,则运行

tsc Driver.ts -out game.js

-out标志告诉编译器将编译连接成一个大的.js文件。但是,Visual Studio项目中的默认行为是并排构建,即base.ts创建base.jsFeatures.ts创建Features.js等。

您可以通过向项目中添加<TypeScriptOutFile>game.js</TypeScriptOutFile>元素来修复项目文件,该元素与其他TypeScript设置相同<PropertyGroup>(默认新项目中第57行附近)。如果您希望在两个编译设置中都有相同的行为,请确保同时添加DebugRelease PropertyGroup元素,或者创建新的非条件PropertyGroup