Tom DuPont .NET: Compile TypeScript On Request with BundleTransformer

Sunday, May 11, 2014

Compile TypeScript On Request with BundleTransformer

I have talked before about BundleTransformer, and how you can use it to compile your LESS on a per request basis. Did you know that it supports TypeScript too?

BundleTransformer is an add on for Microsoft's System.Web.Optimization frame work bundling and minification of web resources. It allows you to convert your compiled languages on the server on request instead of need to create and maintain complied versions of resource files. Best of all BundleTransformer uses a JavaScript engine to compile LESS and TypeScript in with native compiler, ensuring that you will never lag behind the latest version.

Required NuGet Packages

The BundleTransfomer will bring in System.Web.Optimization, but then you need to specify a JavaScriptEngineSwitcher for the framework to run on, as well as a minifier to use on the final scripts when in release.

BundleTransformer.TypeScript
JavaScriptEngineSwitcher.Msie (or the Engine of your choice)
BundleTransformer.MicrosoftAjax (or the minifier of your choice)

After including these packages you need only make three more updates...

Add your TypeScript files to a Bundle

protected void Application_Start()

    AreaRegistration.RegisterAllAreas();

    RouteConfig.RegisterRoutes(RouteTable.Routes);

    var bundle = new CustomScriptBundle("~/Scripts/TypeScriptBundled");

    bundle.Include("~/Scripts/TypeScript1.ts");

    BundleTable.Bundles.Add(bundle);

Render your Bundle

@using System.Web.Optimization

<!DOCTYPE html>

<html>

    <head>

        <title>@ViewBag.Title - TypeScript Bundle Demo</title>

    </head>

    <body><div class="container body-content">

              @RenderBody()

          </div>

        @Scripts.Render("~/Scripts/TypeScriptBundled")

    </body>

</html>

Web.config Updates

<bundleTransformer xmlns="http://tempuri.org/BundleTransformer.Configuration.xsd">

  <core>

  <js defaultMinifier="MicrosoftAjaxJsMinifier">

      <minifiers>

        <add name="NullMinifier"

             type="BundleTransformer.Core.Minifiers.NullMinifier, BundleTransformer.Core" />

        <add name="MicrosoftAjaxJsMinifier"

             type="BundleTransformer.MicrosoftAjax.Minifiers.MicrosoftAjaxJsMinifier, BundleTransformer.MicrosoftAjax" />

      </minifiers>

      <translators>

        <add name="NullTranslator"

             type="BundleTransformer.Core.Translators.NullTranslator, BundleTransformer.Core"

             enabled="false" />

        <add name="TypeScriptTranslator"

             type="BundleTransformer.TypeScript.Translators.TypeScriptTranslator, BundleTransformer.TypeScript"

             enabled="true" />

      </translators>

    </js>

  </core>

 <typeScript>

   <jsEngine name="MsieJsEngine" />

 </typeScript>

</bundleTransformer>

<jsEngineSwitcher xmlns="http://tempuri.org/JavaScriptEngineSwitcher.Configuration.xsd">

  <core>

    <engines>

      <add name="MsieJsEngine"

           type="JavaScriptEngineSwitcher.Msie.MsieJsEngine, JavaScriptEngineSwitcher.Msie" />

    </engines>

  </core>

</jsEngineSwitcher>

<system.webServer>

  <handlers>

    <add name="TypeScriptAssetHandler"

         path="*.ts"

         verb="GET"

         type="BundleTransformer.TypeScript.HttpHandlers.TypeScriptAssetHandler, BundleTransformer.TypeScript"

         resourceType="File"

         preCondition="" />

  </handlers>

</system.webServer>

Enjoy,
Tom

Tom DuPont .NET