爲JavaScript實驗組織DRY模板？

Question

我建立這個文件夾中組織一個相當大規模的JavaScript Backbone.js的應用：

app 
    index.html 

libs 
    underscore 
    jquery 
    [...] 

src 
    utils 
    modules 
    [...] 

index.html文件基本上加載了所有的Backbone.js的路由器等，以及實例AMD模塊等。

然而，我經常需要創建基本上與Big應用程序分享依賴關係的小應用程序。

假設我需要創建3個小實驗（單獨的頁面），所有這些實驗都加載了相同的常見嫌疑犯（下劃線，主幹以及我編寫的一些util庫和模塊）。

它們可能在以下方面有所不同：1）它們如何擴展這些JavaScript庫，2）實例化的內容以及3）標記和交互。

我該如何保持這種實驗乾爽？
如何設置此「可擴展模板」？

Answer 1

在我看來，這是擁有良好構建系統的地方。設置越複雜，設置配置文件就越有用，可以將依賴管理整合到一個地方。

• 您需要加載同一組的多個靜態頁面相關性，但你的相關性列表開發過程中經常發生變化：當此就顯得尤爲重要。

• 您需要能夠輕鬆地爲生產版本創建壓縮版本的依賴項。我發現這對Backbone非常重要，因爲未壓縮的版本非常大，但在開發過程中非常有用。

我一般使用Apache Ant這個，但是有很多構建系統。我已經在過去做的是：

1. 搭建index.tmpl.html文件與核心HTML標記和佔位符JS腳本，CSS文件，並強調模板。

2. 製作一個build.properties定義我的依賴項列表的文件。您可以用不同的屬性名稱以不同的方式將它們分組，例如lib.scripts.all或util.scripts.all。

3. 在我的構建過程中，基於index.tmpl.html，使用<script>和其他標記來加載我的依賴關係，創建一個新的index.html文件。我有不同的目標來加載原始文件或將所有內容壓縮到生產就緒的單個腳本文件中。

您可以在this Github project中看到此設置的示例。

如果我瞭解您的要求，您可以設置一個類似的構建文件，並進行一些調整，以允許您設置a）要使用的HTML模板（您的默認索引或另一個具有特定於實驗的標記），b）輸出文件，c）要加載的特定的依賴關係集，d）加載的附加依賴關係，例如特定於實驗的模塊或初始化腳本。您可以將這些屬性設置爲特定目標（如果您認爲可以重複使用它們幾次），或者在通過-D標誌調用ant時在命令行中指定它們。

這會讓您有很大的靈活性來重新使用代碼的不同部分，並且還有一個額外的好處，即將「實驗」移動到核心生產代碼中，只需將其永久包含在覈心生產代碼中你的構建過程。