优雅的方式来组织脚本包括？

Question

我使用Cordova与Angular和Ionic开发独立于平台的移动应用程序。今天我了解到大型项目设置像这样的项目文件夹是非常聪明的：

root
    index.html
    modules
        app.js
        module_1
            module_1.js
            module_1.html
        module_2
            module_2.js
            module_2.html
            module_2_sub
                module_2_sub.js
                module_2_sub.html
 ...

你定义你的App.js就像这样：

angular.module('App', ['App.Module_1', 'App.Module2'])

但如果您有一个大型项目，那么会导致index.html中包含非常庞大的脚本列表：

<script src="modules/app.js"></script>
<script src="modules/module_1/module_1.js"></script>
<script src="modules/module_2/module_2.js"></script>
<script src="modules/module_2/module_2_sub/module_2_sub.js"></script>
....

是否有更智能的方法来组织此脚本包括？也许像app.js和app.js这样的东西包括所有其他需要的脚本。

当然，人们可以说'为什么你甚至关心那个？'但我有点觉得在index.html中包含这么多内容并不是很“好看”。

Answer 1

你使用grunt或gulp吗？因为我可以推荐你这个插件https://www.npmjs.com/package/grunt-include-source 在主html中自动包含源代码。 如果你决定缩小你的来源，那么包含.min可能会更容易

Answer 2

您可以查看RequireJS。第一次设置有时可能会很痛苦，但一旦启动它就可以帮助解决您的问题。

查看Angular with RequireJS seed或者您更喜欢使用Yeoman。

Answer 3

我可能还建议使用浏览器：http://browserify.org。这让你在浏览器中使用服务器端节点约定。并且还有一个额外的好处，就是让您在浏览器中共享与服务器上相同的代码。在我看来，这是以一致的方式处理代码依赖关系的最先进方法。