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.

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

1 comment:

  1. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from TypeScript Training in Chennai . or learn thru Javascript Training in Chennai. Nowadays JavaScript has tons of job opportunities on various vertical industry. Javascript Online Training from India

    ReplyDelete

Real Time Web Analytics