为JavaScript实验组织DRY模板？

Question

我正在使用此文件夹组织构建一个相当大规模的JavaScript Backbone.js应用程序：

app
  index.html

libs
  underscore
  jquery
  [...]

src
  utils
  modules
  [...]

index.html文件基本上会加载所有Backbone.js路由器等，并实例化AMD模块等。

但是，我发现需要创建基本上与Big应用程序共享依赖关系的小型应用程序。

假设我需要创建3个小实验（单独的页面），这些实验都加载了相同的常见嫌疑人（下划线，主干和一些我编写的工具库和模块）。

他们可能会有不同之处：1）他们如何扩展这些JavaScript库，2）实例化的内容以及3）标记和交互。

如何保持这种实验干燥？ 如何设置这个＆＃34;可扩展模板＆＃34;？

Answer 1

在我看来，这就是拥有一个良好的构建系统的地方。设置越复杂，能够设置配置文件就越有用，这些配置文件可以将您的依赖关系管理整合到一个地方。这在以下情况下变得尤为重要：

• 您需要在多个静态页面上加载相同的依赖关系集，但您的依赖关系列表在开发过程中经常会发生变化。

• 您需要能够轻松地为生产版本创建依赖项的压缩版本。我发现这对于Backbone非常重要，因为未压缩的版本非常大，但在开发过程中非常有用。

我一般都使用Apache Ant，但是那里有很多构建系统。我过去所做的是：

1. 使用核心HTML标记和JS脚本，CSS文件和下划线模板的占位符设置index.tmpl.html文件。

2. 创建一个定义我的依赖关系列表的build.properties文件。您可以使用不同的属性名称以不同方式对它们进行分组，例lib.scripts.all或util.scripts.all。

3. 在我的构建过程中，基于index.html创建一个新的index.tmpl.html文件，其中包含<script>和其他标记以加载我的依赖项。我有不同的目标来加载原始文件或将所有内容压缩为生产就绪的单个脚本文件。

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

如果我了解您的要求，您可以设置一个类似的构建文件，并进行一些调整，以允许您设置a）要使用的HTML模板（您的默认索引或其他具有实验特定标记），b）输出文件，c）要加载的特定依赖关系集，d）要加载的其他依赖关系，例如特定于实验的模块或初始化脚本。您可以在特定目标中设置这些属性（如果您认为将重复使用它们几次），或者在通过ant标志调用-D时在命令行上指定它们。

这将为您提供极大的灵活性，可以重复使用代码的不同部分，并且还可以让您更轻松地将“实验”移动到核心生产代码中，只需将其永久地包含在您的代码中即可建立过程。