Javascript依赖性管理和包装

我想弄清楚如何最好地管理Javascript文件依赖关系，并且驱动100％前端应用程序的打包。总之，我正在使用backbone.js和其他一些库来构建一个应用程序。我想要一个有组织的代码库，并希望能够在每个文件中声明相关性。理想情况下，这些声明将a）驱动浏览器加载文件的顺序（在开发过程中，我希望文件可以单独加载），并且驱动打包脚本加载脚本进行串联的顺序（我旨在服务整个应用程序的单个文件）。Javascript依赖性管理和包装

我一直在阅读有关requirejs和commonjs，但我不相信。

我现在有一个简单的shell脚本，它使用cat <file> <file> <file> <file> > concatenated.file来做我想做的事情，但是按照正确的顺序维护文件列表是一件很痛苦的事情。在每个JavaScript文件的开头部分声明依赖关系要容易得多，并且让打包器和加载器能够聪明地使用该信息来连接/加载脚本。

有什么建议吗？

谢谢你，

路易斯

来源

2012-02-11 luisgo

对于复杂的应用程式前端异步模块定义（AMD）格式是最好的选择。它支持AMD（curl.js，RequireJS）的很多优秀的加载程序。

我建议这个文章来了解JavaScript的dependecy管理的现代方法：

Writing Modular JavaScript With AMD, CommonJS & ES Harmony

Why AMD?

对于包装顾及CommonJS规格，有几个实现，它是一个品味的问题，但无论如何我建议选择符合某些规范的工具。

来源

2012-02-11 00:55:22 Nayjest

好吧，你赢了。我已经对使用AMD，require.js等进行了结构改变。我会补充的一个问题是：当使用r.js来编写/ uglyfy/etc应用程序时，我希望将所有JS级联成一个文件。当使用一个构建配置文件时，我似乎无法做到这一点。构建目录本质上包含与我的源目录相同的结构，但每个文件都很糟糕。这是我正在运行的命令：'node node_modules/requirejs/bin/r.js -o app.build.js'这是app.build.js的内容：https：//gist.github.com/ 94b400be04dcd40cd762 – luisgo 2012-02-11 20:16:01

我偏爱自己。这是JavascriptMVC的一部分，但没有理由为什么你不能使用它与Backbone.js

关于这一个好的部分是，它建立你的应用程序的生产包括缩小你的CSS和JS和整齐地打包到2文件：production.css和production.js。

它可以处理加载非JS文件，所以你可以做一些事情，比如steal（'somefile.css'）。then（function（）{...}）;

对于文件，它非常像你会做其他语言：

steal(dep1, dep2, dep3).then(function() { 
    // code 
});

来源

2012-02-11 00:56:08

这将会是更容易能够声明在每个javascript文件的开头的依赖，并有打包者和加载者可以聪明地使用这些信息来连接/加载脚本。

我已经在几个月前有同样的想法，并正在研究一种依赖解析器我Resource Builder这已经让我更容易（包括需要开发和部署的版本之间distinuish，使用可选的debug参数）。

JsDoc Toolkit（以及相关的工作），支持哪种语法e。 G。通过Eclipse JSDT，提供了一个@requires标签，所以你可以使用它。但是解决依赖问题仍然不是一项简单的任务（如您在ResourceBuilder::resolveDeps()中看到的那样）。（最终目标是使用静态代码分析自动解决依赖，没有任何标记。）

这将减少当前

<script type="text/javascript" src="builder?src=object,types,dom,dom/css"></script>

到只有

<script type="text/javascript" src="builder?src=dom/css"></script>

至于异步装载机：异步装载机的好处是它们速度很快。异步装载机的坏处是 - 如果它们工作的话;它们都基于非标准方法 - 它们速度如此之快，以至于无法确定脚本提供的功能在以下脚本中是否可用。所以你必须让你的代码由听众执行。我建议避免使用它们，除非您的应用程序中只有需求时才有功能。

来源

2012-02-11 02:14:34 PointedEars

Javascript依赖性管理和包装

回答

相关问题