維護中型到大型JS重型Web應用程序

Question

在Web前端處理大量JS的最佳方式是什麼？谷歌的Closure編譯器可以編譯和縮小JS，這對生產很有用 - 但是很煩人，不得不在每次進行更改時重新編譯，並且煩人去調試。

什麼是能夠將我的JS組織成多個文件的最佳方式？

Answer 1

實際上有兩個問題：如何避免發展重新編譯，什麼是組織很多js文件的最好方法。

第一個問題的簡單回答是在您的模板中有一個用於生產/開發模式的變量。在僞模板代碼它可能看起來像這樣（例如粗糙，當然最好是使用腳本加載的工具，像LABjs等）：

{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} 

那麼您只能切換到生產模式下進行編譯。

第二個問題要複雜得多，而且答案往往是自以爲是的。您可以嘗試使用強加它們自己的文件結構的現有工具，例如JavascriptMVC或更輕量級RequireJS。

Answer 2

關於'惱人的調試'部分的JavaScript壓縮，我有兩件事發生在我的代碼中，只有當項目在調試時我會提供非壓縮文件，這樣我在對文件進行任何更改後，不必重新構建javascript壓縮項目。另外，如果你使用的是IE瀏覽器（而且喜歡它），IE9有一個javascript調試的「漂亮打印」功能，應該解壓縮（顯然不會修復混淆）。

---

在Visual Studio與YUI Compressor for .NET結合可以做的JavaScript/CSS壓縮和縮小你的MSBuild任務。我有一個'靜態'項目，我的javascript，CSS和圖像坐在那裏，所以當我修改我的javascript/CSS時，我構建這個項目，它使用YUI壓縮器來合併和縮小我的文件。這樣我可以分開我的JavaScript和CSS文件，但一起提供它們，而不必使用手動工具來壓縮它們。

在項目屬性，下生成事件，我把這個在「生成後事件命令行」：

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

樣本MSBuild.xml文件：（我有3個Compressor Tasks讓我可以獲取文件的特定羣體）

<?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

希望幫助

Answer 3

也許這個人會幫

How to automate JavaScript files compression with YUI Compressor?