Maintaining medium-sized to large JS-heavy web apps

What's the best way to deal with lots of JS in a web front end? Google's Closure compiler can compile and minify JS, which is good for production -- but annoying to have to recompile every time I make a change, and annoying to debug.

What's开发者_C百科 the best way to be able to organise my JS into many files?

There are actually 2 questions: how to avoid recompiling in development and what's the best way to organize many js files.

Easy answer for the first question is having a variable for production/development modes in your template. In pseudo-template code it may look like this (example is rough, of course it's better to use script loading tool like LABjs etc.):

{if mode == 'production'}
  <script src="allmyscripts.min.js"></script>
{elseif mode == 'development'}
  <script src="lib.js"></script>
  <script src="plugin1.js"></script>
  <script src="plugin2.js"></script>
  <script src="script1.js"></script>
{/if}

So you will only have to compile when switching to production mode.

The second question is far more complicated and answers tend to be opinionated. You may try using existing tools that impose their own file structure, e.g. JavascriptMVC or more lightweight RequireJS.

In regards to the 'annoying to debug' part of javascript compression, I've got two things happening in my code, only when the project is in debug I'll serve out the non-compressed files, this way I don't have to re-build the javascript compression project after any change to the files. Additionally, if you're using IE (and like it?), IE9 has a 'pretty-print' feature for javascript debugging, which should uncompress (obviously won't fix obfuscation though).

An MSBuild task in visual studio combined with the YUI Compressor for .NET can do javascript/CSS compression and minification for you. I have a 'static' project, where my javascript, CSS, and images sit, so when I modify my javascript/CSS I build this project and it uses YUI compressor to combine and minify my files. This way I can can separate my javascript and css files, but serve them out together without having to use a manual tool to compress them.

In the Project properties, under the Build Events, I put this in the "Post-build event command line":

/p:SourceLocation="$(ProjectDir)"
$(MSBuildBinPath)\msbuild.exe "$(ProjectDir)MSBuild\MSBuild.xml"

A sample MSBuild.xml file: (mine has 3 Compressor Tasks so that I can get specific groups of files)

<?xml version="1.0" encoding="utf-8"?>
<Project xmlns="http://schemas.microsoft.com/developer/MsBuild/2003">
  <UsingTask
      TaskName="CompressorTask"
      AssemblyFile="Yahoo.Yui.Compressor.dll" />
  <Target Name="MyTaskTarget">
    <ItemGroup>
      <CssFiles Include="$(SourceLocation)..\css\Style.css"/>
      <CssFiles Include="$(SourceLocation)..\css\StylePrint.css" />
      <JavaScriptFiles Include="$(SourceLocation)..\scripts\general\*.js" />
    </ItemGroup>
    <CompressorTask
        CssFiles="@(CssFiles)"
        DeleteCssFiles="false"
        CssOutputFile="$(SourceLocation)..\css\Style.min.css"
        CssCompressionType="YuiStockCompression"
        JavaScriptFiles="@(JavaScriptFiles)"
        ObfuscateJavaScript="True"
        PreserveAllSemicolons="False"
        DisableOptimizations="Nope"
        EncodingType="Default"
        DeleteJavaScriptFiles="false"
        LineBreakPosition="-1"
        JavaScriptOutputFile="$(SourceLocation)..\scripts\general.min.js"
        LoggingType="ALittleBit"
        ThreadCulture="en-us"
        IsEvalIgnored="false"
            />
  </Target>
</Project>

Here is another guide to do compression/minification as MSBuild task

Hope that helps

Maybe this one will help

How to automate JavaScript files compression with YUI Compressor?