Customizing the specific output files for various

问题:

I've got a web project using TypeScript that has some reasonably complex requirements for the compiled output files. So for instance, I need all the *.ts files in one directory to compile down to one single .js file, and all the *.ts files in another directory to compile down to a different .js file. (It's more complex than that, but you get the idea.)

I've been able to get this working using the tsc.exe command-line, using input files and what-not, but I'd like to be able to use MSBuild .targets files - among other things, using tsc.exe from the command-line seems to be pretty poorly supported on continuous integration servers, where it can be located who-knows-where, and certainly isn't likely to be in the path.

According to this answer here, it seems like I should be able to do this using custom build targets. So I've created a custom version of Microsoft.TypeScript.targets, and in addition to the default "CompileTypeScript" target, I've created a second one, "PayboardApiV10", so that the relevant part looks like so:

  <Target Name="CompileTypeScript" Condition="'$(BuildingProject)' != 'false'">
    <Message Text="Compiling TypeScript files normally" Importance="high"/>
    <VsTsc
      ToolPath="$(TscToolPath)"
      ToolExe="$(TscToolExe)"
      Configurations="$(TypeScriptBuildConfigurations)"
      FullPathsToFiles="@(TypeScriptCompile)"
      YieldDuringToolExecution="$(TscYieldDuringToolExecution)"
      OutFile="$(TypeScriptOutFile)"
      OutDir="$(TypeScriptOutDir)"
      >
      <Output TaskParameter="GeneratedJavascript" ItemName="GeneratedJavascript" />
    </VsTsc>
  </Target>

  <Target Name="PayboardApiV10" Condition="'$(BuildingProject)' != 'false'">
    <Message Text="Compiling TypeScript files for Payboard API v1.0" Importance="high"  />
    <VsTsc
      ToolPath="$(TscToolPath)"
      ToolExe="$(TscToolExe)"
      Configurations="$(TypeScriptBuildConfigurations)"
      FullPathsToFiles="@(TypeScriptCompile)"
      YieldDuringToolExecution="$(TscYieldDuringToolExecution)"
      OutFile="Payboard.js"
      OutDir="$(ProjectDir)api\v1.0\"
      >
      <Output TaskParameter="GeneratedJavascript" ItemName="GeneratedJavascript" />
    </VsTsc>
  </Target>

And then I've specified a "CustomTool" in my project configuration for the specific files that I'd like to get picked up by the "PayboardApiV10" build target, like so:

I should note that I have no idea if I'm doing this bit correctly. I can't seem to find any documentation on it, and the only examples I've been able to find are from that previous answer. And more to the point, when I run my builds, all the TS files in my project get caught up in the first build target, including the ones for which I've specified "MSBuild:PayboardApiV10" for the custom tool. The "PayboardApiV10" tool never seems to get run, i.e., I never see the message "Compiling TypeScript files for Payboard API v1.0".

So two questions:

(1) Is there a better way to do what I'm trying to do?

(2) If this is generally the right way to do it, any ideas as to what I'm doing wrong?

回答1:

The direction you're going is the optimal way (on save). In the meantime you can use post-build events to transform the typescript. Right click on your project and select properties. Select Build Events and in the Post-Build area you can specify command line parameters to use tsc.exe.

On the direction you're going (compile on save) I think the project file may be missing the following on each file you want compiled:

<TypeScriptCompile Include="app.ts" />

The configuration is also likely missing the environment settings.

<PropertyGroup Condition="'$(Configuration)' == 'Debug'">
    <TypeScriptTarget>ES5</TypeScriptTarget>
    <TypeScriptIncludeComments>true</TypeScriptIncludeComments>
    <TypeScriptSourceMap>true</TypeScriptSourceMap>
</PropertyGroup>

More information on both methods is available at this TypeScript wiki page.

回答2:

I ended up asking this same question over on the TypeScript forums (https://typescript.codeplex.com/discussions/455781). The conclusions I drew from the conversation there:

• There isn't a great way to do it now.

• The best hacky way to do it now is probably the way that I was doing it, namely, with batch files, post-build events, and checking the compiled files into source. Other folks recommended Grunt, or the ASP.NET MVC bundling mechanism (the latter won't work in my scenario); I've also used the r.js minifier in the past. And these will work; but to reiterate, none of these are really very good solutions.

• The best way to do it in the future will be to create "library projects" of TypeScript files, so that all TS files in a given project get compiled together; and then you can reference the library TS projects from your main Web project, and will automatically get the compiled files merged into your main ~/Scripts folder. But that will require support from the TS team - which Jon Turner basically indicated would be coming, though he didn't say when. (See also https://typescript.codeplex.com/workitem/571.)