如何pipe理客户端的JavaScript依赖关系？

虽然有很好的解决scheme来pipe理服务器端的依赖关系，但我找不到满足我所有需求的客户端JavaScript依赖pipe理工作stream程。 我想要满足这5个要求：

1. 以与npm的package.json或bower的bower.json类似的格式pipe理我的客户端依赖bower.json
2. 它应该有灵活性指向git repo或实际的js文件（无论是在网上或本地）在我的dependency.json文件中较less知道的库（npm让你指向git仓库）
3. 它应该缩小和命名空间所有库到一个单一的文件，如恩德 – 这是唯一的JS文件，我需要把我的<script>标签在客户端
4. 它应该像BoxJS 4 （现在已经死了）一样支持CoffeeScript，

5. 在浏览器中，我应该可以使用任何需要的样式：

    var $ = require('jquery'); var _ = require('underscore'); 

   或者更好的是，做headjs风格：

    head.js(['jquery', 'underscore', 'mylib'], function($, _, mylib) { // executed when all libraries are loaded }); 

如果没有这样一个单一的工具存在，什么是最好的工具组合，即我可以结合使用诸如volo （或grunt ）之类的工具链？

我已经研究了我在这里链接到的所有工具，它们最多只能满足我个人的要求。 所以，请不要再发布这些工具。 我只接受一个答案，它提供了满足我所有5个要求的单个工具，或者如果有人发布了一个具有多个工具链的具体工作stream程/脚本/工作示例，也可以满足我所有的要求。 谢谢。

Answer 1

require.js做你需要的一切。

我对这个问题的回答可能对你有帮助

例：

客户端应用项目层次

 sampleapp |___ main.js |___ cs.js |___ require.js 

main.js是初始化客户端应用程序并configurationrequire.js的地方：

 require.config({ baseUrl: "/sampleapp", paths: { jquery: "libs/jquery", // Local underscore: "http://underscorejs.org/underscore-min.js", // Remote backbone: "https://github.com/documentcloud/backbone/blob/master/backbone-min.js" // Remote on github }, shim: { backbone: { deps: ["underscore", "jquery"] // Backbone depends on jquery and underscore } } }); require(["cs!someCoffeescriptFile", "jquery", "backbone", "underscore"], function (SomeCoffeescriptFile, $, Backbone, _) { // Dependencies are loaded... // Execute code }); 

前缀“cs！”时，依赖项将使用cs插件。 cs插件编译coffeescript文件。

当你进入prod时，你可以用r.js预编译你的整个项目。

 node ./node_modules/requirejs/bin/r.js -o buildclientconfig.js 

这是你的要求：

• 以与npm的package.json或bower的component.json类似的格式pipe理我的客户端依赖项。 不同但是好！

• 我应该有灵活性指向git repo或实际的js文件（无论是在网上或本地）在我的dependency.json文件中较less知道的库（npm让你指向git仓库）。 是

• 它应该缩小和名称空间的所有库到一个单一的文件，如恩德 – 这是唯一的js文件，我需要把我的脚本标签在客户端。 YES与r.js.

• 它应该支持像Box这样的咖啡文本。 是

• 在浏览器中，我可以使用require风格或headjs。 是

Answer 2

http://requirejs.org/是你正在寻找我相信;

Answer 3

作为@ Guillaume86我认为下摆会让你最接近你想成为的地方。

在下摆依赖性使用npm和下摆的组合来pipe理。 使用npm显式安装所有的项目外部依赖项。 使用下摆指定哪些依赖项（外部和本地）应该为您的客户端操作一起缝合。

我创build了一个这个框架项目，所以你可以看到这是如何工作的 – 你可以在https://github.com/dsummersl/clientsidehem

添加依赖关系

使用npmsearch特定的依赖关系，然后修改package.json文件以确保将来跟踪依赖关系。 然后在slug.json中为应用程序指定依赖项。

例如，假设您想添加咖啡脚本依赖项。 只需使用npm来安装依赖项并将其保存到package.json文件中：

 1. npm --save install coffee-script 2. Manually edit the slug.json file. Add "coffee-script" to "dependencies". 

假设你想包含你自己的模块bloomfilters，它不在npmregistry中。 您可以按照以下方式将其添加到您的项目中：

 1. npm --save install https://github.com/dsummersl/bloomfilters/tarball/master 2. Manually edit the slug.json file. Add "bloomfilters" to "dependencies". 

本地模块

如果你想包括自己的咖啡或JavaScript，你可以通过将这些文件添加到应用程序/文件夹。 请注意，为了通过'require'方法暴露你的脚本，你必须使它成为CommonJS模块。 这很简单 – 看下摆文件 。

本地文件

如果你想包含非CommonJS非'require'代码，你也可以通过在slug.json中的'libs'列表引用你自定义的javascript或coffeescript来缝合。

CSS

如果你愿意的话，Hem会把你的CSS缝在一起。 看到下摆文件 。

build造

一旦你列出你的依赖关系，你可以用下摆将它们缝在一起。

 # make sure all dependencies are present: npm install . # make public/application.js hem build # see your minified js in public/application.js 

笔记

Hem是为Spinejs项目devise的 – 但你不必为此使用它。 忽略任何提及脊柱的文档，如你所愿…

Answer 4

那么，我很惊讶，没有人提到Browserify呢。

1. 支持package.json格式
2. 使用下面的npm可以使用github（或任何git）回购作为包源
3. 将所有依赖关系缩小并连接成单个文件。
4. 支持coffeescript，如果你把它包含在你的依赖关系中
5. 需要一路风格。
6. 支持源地图

Answer 5

我很确定Hem符合你的要求（我使用额外的编译器的个人化的分支 – 玉石和手写笔 – 很容易根据你的需求定制）。 它使用npm来pipe理依赖性。

Answer 6

你可能想看看Yeoman ，它使用几种技术来帮助你满足你的要求。

我们的工作stream程包括三个工具，用于在构buildWeb应用程序时提高您的工作效率和满意度： 哟 （脚手架工具）， 咕噜 （构build工具）和凉亭 （用于包pipe理）。

内置对CoffeeScript，Compass等的支持。 适用于r.js（ RequireJS ），unit testing等

至于你的要求：

1. 鲍尔用于依赖pipe理
2. 鲍尔可以使用本地文件，git：//，http：//和更多
3. 内置支持缩小和连接（即使是你的图像）
4. 内置支持自动编译CoffeeScript和Compass（带有LiveReload）
5. 正如在构build过程中所述： 如果您使用AMD，我将通过r.js传递这些模块，所以您不必这样做。

所有function：

快速脚手架 – 轻松支持与定制模板（如HTML5 Boilerplate，Twitter Bootstrap），RequireJS和更多的新项目。

伟大的构build过程 – 不仅可以缩小和拼接， 我还优化了所有的图像文件，HTML，编译你的CoffeeScript和Compass文件，如果你使用的是AMD，我将通过r.js传递这些模块，所以你不需要。

自动编译CoffeeScript和Compass – 我们的LiveReload监视过程会自动编译源文件并在您进行更改时刷新浏览器，因此您不必这样做。

自动提示您的脚本 – 所有的脚本都会自动运行，以确保它们遵循语言最佳实践。

内置预览服务器 – 不必再启动自己的HTTP服务器。 我的内置的一个可以用一个命令来解雇。

真棒图像优化 – 我使用OptiPNG和JPEGTran优化所有的图像，以便您的用户可以花更less的时间下载资源和更多的时间使用您的应用程序。

杀手软件包pipe理 – 需要依赖？ 这只是一个按键。 我允许你通过命令行（例如`bower search jquery）轻松地search新的包，安装它们并保持更新，而无需打开浏览器。

PhantomJSunit testing – 轻松通过PhantomJS在无头WebKit中运行unit testing。 当你创build一个新的应用程序，我还包括一些testing脚手架为您的应用程序。

Answer 7

鲍尔可能适合您的需要（1）和（2）其余你有requirejs。 自述文件：

 Bower is a package manager for the web. Bower lets you easily install assets such as images, CSS and JavaScript, and manages dependencies for you. 

要安装软件包：

 bower install jquery bower install git://github.com/maccman/package-jquery.git bower install http://code.jquery.com/jquery-1.7.2.js bower install ./repos/jquery 

Answer 8

看看Jam包pipe理器 。 以下是从其主页的描述

对于渴望可维护资产的前端开发人员，Jam是JavaScript的包pipe理器。 与其他库不同，我们首先将浏览器。

它在工作方式上与npm很相似。

像下面一样安装包

 jam install backbone 

通过执行保持软件包最新

 jam upgrade jam upgrade {package} 

优化生产包

 jam compile compiled.min.js 

Jam依赖关系可以添加到package.json文件中。

有关完整文档，请阅读Jam文档

Answer 9

我刚刚遇到了inject.js

项目网站的一些function：

注入（Apache软件许可证2.0）是一种革命性的方式来pipe理你的依赖关系在图书馆不可知论的方式。 它的一些主要function包括：

• 浏览器中的CommonJS合规性（exports。*）
• 查看完整的CommonJS支持列表
• 跨域检索文件（通过easyXDM）
• localStorage（加载一个模块）

Answer 10

有几个选项：

• http://browserify.org/它允许你导入模块;
• RequireJS解决了同样的问题
• 似乎在积极发展的是JoinJS

组件也可能是感兴趣的，它本身不pipe理依赖关系，但允许使用其他大型库的碎片版本。

Answer 11

我在npm中使用了下划线，我想添加一些额外的好处，我认为目前为止还没有涉及。

• Hem有一个独立的Web服务器（分层），所以你可以开发你的代码，甚至不需要重新编译。 除非我发布应用程序，否则我不会使用hem build 。
• 你不需要使用Spine.js来使用hem，如果你设置了slug.json，你可以使用它来编译任意的coffeescript包。 这是我用cakefile自动编译的一个包： https ： //github.com/HarvardEconCS/TurkServer/tree/master/turkserver-js-client
• 说到上面这些，hem允许你使用npm链接连接本地系统的其他依赖项，并且即使在你使用strata服务器的时候也可以无缝地组合它们。 事实上，你甚至不需要使用上面的cake方法，你可以直接链接到从属项目的咖啡脚本。
• Hem支持eco （embedded式Coffeescript）视图和Stylus for CSS，并将所有这些以及您的Coffeescript编译成一个JS和一个CSS文件。

这里有一个基本的列表设置与脊柱，下摆，咖啡的应用程序。 随意忽略脊柱部分。 实际上，有时我会使用spine app为非Spine应用spine app设置目录结构，然后编辑slug.json以更改为不同的编译结构。

1. 安装NPM： curl http://npmjs.org/install.sh | sh 在一个* nix系统上。 我会假设它可以从命令行。
2. 在全球安装下摆（ npm install -g hem ）。 开发已经分支到最近，所以你可能想直接从github（ https://github.com/spine/hem ）中获取它，检出一个分支，然后使用npm install -g . 在该文件夹中。
3. npm install -g spine.app将使脊椎成为一个全局命令
4. spine app folder将在folder spine app folder创build一个称为app的Spine项目，生成正确的目录结构和一堆骨架文件以开始。
5. cd到文件夹并编辑您需要的库的dependencies.json 。 将它们添加到slug.json以便下摆知道在哪里可以find它们。
6. 可选： npm link任何本地包npm link到node_modules ，并且可以将它们添加到slug.json中（可以直接包含index.js ，也可以直接包含index.coffee ）。
7. npm install . 下载您刚input的所有依赖关系。

8. 如果你看一下默认的spineconfiguration，那么你require一个app/lib/setup.coffee ，你需要从你的依赖关系中require所有库。 例子：

    # Spine.app had these as dependencies by default require('json2ify') require('es5-shimify') require('jqueryify') require('spine') require('spine/lib/local') require('spine/lib/ajax') require('spine/lib/manager') require('spine/lib/route') # d3 was installed via dependencies.json require 'd3/d3.v2' 

9. 在index.coffee ，您只require lib/setup并为您的应用程序加载主控制器。 另外，你需要在其他控制器中require其他类。 您可以使用spine controller something或spine model something来生成控制器和模型的模板。 典型的Spine控制器如下所示，使用节点的require ：

    Spine = require('spine') # Require other controllers Payment = require('controllers/payment') class Header extends Spine.Controller constructor: -> # initialize the class active: -> super @render() render: -> # Pull down some eco files @html require('views/header') # Makes this visible to other controllers module.exports = Header 

10. 默认生成的index.html通常可以正常加载您的应用程序，但根据需要进行修改。 根据您的要求，它只能拉一个js和一个css文件，这是你永远不需要修改。

11. 根据需要在css文件夹中编辑手写笔文件。 这比CSS更灵活:)
12. 从folder ，运行hem server以启动折边服务器，然后导航到localhost:9294以查看您的应用程序。 （如果你全局安装了下划线。）它有一些隐藏的参数，例如--host 0.0.0.0监听所有的端口。
13. 使用适当的MVC技术构build应用程序的其余部分，并使用手写笔查看CSS和eco。 或者根本不使用Spine，而且使用Coffeescript和npm，下摆仍然很好用。 有很多使用两种模型的项目的例子。

还有一件事：通常情况下，当您更新代码并保存文件时， hem server会自动更新，这使得debugging成为一件轻而易举的事情。 运行hem build将编译您的应用程序到两个文件， application.js ，这是缩小和application.css 。 如果在此之后运行hem server ，它将使用这些文件，不再自动更新。 所以，除非你真的需要一个缩小版本的应用程序来部署，否则不要hem build 。

其他参考： Spine.js＆下摆开始

Answer 12

下面是一个解决scheme，采取了一种非常不同的方法：将所有模块打包成一个JSON对象，并且需要模块通过读取和执行文件内容而无需额外的请求。

纯客户端演示实施： http : //strd6.github.io/editor/

https://github.com/STRd6/require/blob/master/main.coffee.md

STRd6 / require取决于在运行时使用JSON包。 为该包生成require函数。 该软件包包含您的应用程序可能需要的所有文件。 没有进一步的http请求，因为这个软件包捆绑了所有的依赖关系。 这和客户端的Node.js风格所要求的一样。

包装的结构如下：

 entryPoint: "main" distribution: main: content: "alert(\"It worked!\")" ... dependencies: <name>: <a package> 

与Node不同，一个包不知道它是外部的名字。 这是由包括依赖项在内的pacakge命名的。 这提供了完整的封装。

给定所有的设置这里是一个函数，从一个包中加载一个文件：

 loadModule = (pkg, path) -> unless (file = pkg.distribution[path]) throw "Could not find file at #{path} in #{pkg.name}" program = file.content dirname = path.split(fileSeparator)[0...-1].join(fileSeparator) module = path: dirname exports: {} context = require: generateRequireFn(pkg, module) global: global module: module exports: module.exports PACKAGE: pkg __filename: path __dirname: dirname args = Object.keys(context) values = args.map (name) -> context[name] Function(args..., program).apply(module, values) return module 

这个外部上下文提供了一些模块可以访问的variables。

require函数暴露给模块，所以他们可能需要其他模块。

其他属性，如全局对象的引用和一些元数据也被暴露。

最后我们在模块中执行程序并给定上下文。

对于那些希望在浏览器中具有同步node.js风格require语句并且对远程脚本加载解决scheme不感兴趣的人来说，这个回答将非常有用。

Answer 13

如果您在后端使用node / express，请查看cartero 。

Answer 14

我build议查看似乎满足您的大部分要求的道场工具包 。 我不确定的是CoffeeScript。

dojo可以使用以asynchronous模块定义（AMD）格式编写的模块。 它有一个带有包的构build系统，你可以把它们聚合成一个或几个文件（称为图层）。 显然它接受gittypes的存储库，这里的构build系统的更多细节：

http://dojotoolkit.org/documentation/tutorials/1.8/build/

预计下个月会有v1.9testing版。

Answer 15

另一个满足我最近发布的标准的框架是： http : //duojs.org/ （也支持像CSS这样的其他资源作为依赖关系）。

Answer 16

asynchronous加载dependency injection+ browserify将是另一个不错的select，比较requirejs

asynchronous前端的依赖pipe理，而无需-AMD

Answer 17

我创build了一个脚本（4kb缩小），用于同步加载类似于Java的“import”和c ++的“using”的javascript和css文件。 它允许你这样做：

     _import（ '/ jquery的-min.js'）;
    警报（$）;

它并没有像RequireJS那样使用一个痛苦的设置过程，只是将脚本包含在标签中，然后就可以开始了。 加载是同步的，因此不需要像大多数其他脚本加载器一样将其余代码放入callback中。 从这里抓取： https ： //github.com/maschinak/_import