如何管理客户端JavaScript的依赖？ [关闭] 如何管理客户端JavaScript的依赖？

虽然有在服务器端管理依赖性很大的解决方案，我找不到任何满足我所有的需要有一个连贯的客户端的JavaScript依赖管理工作流程。 我要满足这些要求，5：

1. 管理我的客户端依赖于类似故宫的格式的package.json或凉亭的bower.json
2. 它应该有灵活性，以指向我与git回购或实际的JS文件（无论是在网络或本地） dependency.json文件鲜为人知库（NPM让你指向的Git回购）
3. 它应该再压缩和命名空间的所有库到像一个单独的文件安德 -这是唯一的js文件，我需要把我<script>标记在客户端
4. 它应该有出于对CoffeeScript的像BoxJS盒支持4 （已经死了）

5. 在浏览器中，我应该能够为使用需要的风格：

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

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

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

如果没有这样一个单一的工具存在，什么是最好的工具组合，即我可以使用类似结合起来的工具链VOLO （或呼噜声 ）？

我已经研究了我在这里挂的所有工具，他们只满足我的要求高达3充其量独立。 所以，请不要再对这些工具的发布。 我只接受提供了一个单一的工具，满足的答案全部5我的要求，或者如果有人发布的多个这样的工具，工具链也满足我的所有要求的具体工作流程/脚本/工作示例。 谢谢。

Answer 1:

require.js做你需要的一切。

我回答这个问题可以帮助你

例：

客户端应用程序的项目层次：

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

main.js是你初始化客户端应用程序和配置require.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的文件。

当您在督促去，你可以预先编译与整个项目r.js 。

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

这里有您的要求：

• 管理我的客户端依赖于类似故宫的的package.json或凉亭的component.json的格式。 不同但AS GOOD！

• 我应该可以灵活地指向我dependency.json文件混帐回购协议或实际的JS文件（无论是在网络或本地）的鲜为人知的库（NPM让你指向的Git回购的）。 是

• 它应该再压缩和命名空间的所有库到像安德一个单一的文件 - 这是唯一的js文件，我需要把我的脚本标签在客户端。 YES与r.js.

• 它应该有出于对样箱箱的CoffeeScript支持。 是

• 在浏览器中我可以使用需要的风格或headjs。 是

Answer 2:

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

Answer 3:

正如@ Guillaume86我认为下摆将让你最接近的地方，你想要的。

在下摆的依赖正在使用NPM和下摆的组合管理。 使用NPM来显式安装所有项目的外部依赖。 使用下摆指定依赖（外部和本地的）应该是你的客户端操作缝合在一起。

我创建的这个骨架项目，所以你可以看到这是如何工作的-你可以看到它https://github.com/dsummersl/clientsidehem

添加依赖

使用NPM来搜索特定的依赖，然后修改的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”，这是不是在NPM注册表。 你可以将它添加到下面的方式您的项目：

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

本地模块

如果你要包括你自己的咖啡或JavaScript，你可以将这些文件复制到应用程序/文件夹这样做。 需要注意的是，为了通过必须使之成为一个CommonJS的模块“需要”的方法来暴露你的脚本。 这是非常简单的-看到下摆文档 。

本地文件

如果你想包括非CommonJS的非“需要”的代码，你也可以缝合，通过经由slug.json的“库”列表引用您的自定义JavaScript或CoffeeScript的。

CSS

下摆将你的CSS缝合在一起也一样，如果你想要的。 见下摆文档 。

建造

一旦你有你的依赖列出，您可以使用下摆将它们拼接在一起。

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

笔记

下摆是为那些在spinejs项目-但你不必将它用于。 忽略任何文档提的脊柱如你所愿？

Answer 4:

嗯，我很惊讶，没有人mentionned Browserify呢。

1. 支持的package.json格式
2. 使用NPM在其下可以使用的github（或任何GIT）回购作为包源
3. minifies并连接所有依赖到一个文件中。
4. 支持CoffeeScript中如果包括它在你的依赖
5. 需要风格的所有道路。
6. 支持源图

Answer 5:

我敢肯定， 下摆满足您的要求（我用另外一个编译器叉的personnal -玉和手写笔-可以很容易地根据需要自定义）。 它使用NPM管理depedencies。

Answer 6:

你可能想看一看约曼 ，它使用多种技术来帮助您与您的要求。

：我们的工作流程是构建Web应用程序时提高你的工作效率和满意度由三个工具哟 （脚手架工具）， 咕噜 （构建工具）和鲍尔 （包管理）。

内建的CoffeeScript中，指南针和更多的支持。 与r.js（工作RequireJS ），单元测试等

至于你的要求：

1. 鲍尔用于依赖管理
2. //，HTTP：//多鲍尔可以与本地文件，git的工作
3. 内建支持缩小和级联（甚至为你的形象）
4. 内置支持自动编译CoffeeScript的指南针（带LiveReload）
5. 正如在构建过程中指出： 如果你使用AMD，我将通过r.js通过这些模块，所以你不必。

所有功能：

快如闪电的脚手架 -轻松脚手架用自定义的模板（如HTML5样板，Twitter的引导），RequireJS和更多的新项目。

伟大的建设过程 -你不仅得到缩小和拼接; 我还可以优化所有的图像文件，HTML，编译你的CoffeeScript和Compass文件，如果你使用AMD，我将通过r.js通过这些模块，所以你不必。

自动编译CoffeeScript的指南针 -我们LiveReload手表过程中自动编译源文件并刷新浏览器，每当一个变化是，这样你就不必。

自动皮棉脚本 -你的所有脚本都对JSHint自动运行，以保证他们在关注语言的最佳实践。

内置预览服务器 -没有更多不必火了你自己的HTTP服务器。 我内置了一个可以只用一个命令被解雇。

真棒图像优化 -优化我用使用OptiPNG和JPEGTran使您的用户可以花更少的时间使用你的应用程序下载的资产和更多的时间所有的图像。

杀手包管理 -需要依赖？ 这只是一个按键的路程。 我让你轻松地搜索通过命令行新包（如`凉亭搜索jQuery的），安装它们并保持更新，而无需打开浏览器。

PhantomJS单元测试 -轻松无头WebKit的通过PhantomJS运行单元测试。 当你创建一个新的应用程序，我还包括了您的应用程序的一些测试脚手架。

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:

看看果酱包管理器 。 以下是从首页的说明

对于谁渴望维护资产前端开发人员，果酱是对JavaScript的软件包管理器。 不像其他的资料库，我们首先把浏览器。

这似乎是一个很多类似NPM它是如何工作的。

像下面安装包

jam install backbone

通过执行程序包保持最新

jam upgrade
jam upgrade {package} 

优化生产包装

jam compile compiled.min.js

果酱依赖关系可以用添加package.json文件。

有关完整文档阅读果酱文档

Answer 9:

我只是碰上了inject.js

一些特点，从项目选址 ：

注射（Apache软件许可证2.0）是管理图书馆不可知论的方式你的依赖方式的革命。 它的一些主要功能包括：

• CommonJS的合规性的浏览器（出口。*）
• 查看完整CommonJS的支持矩阵
• 文件的跨域检索（通过easyXDM）
• localStorage的（加载模块一次）

Answer 10:

有几个选项：

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

组件还可能会感兴趣，它不管理依赖性本身，而是允许你使用，否则大型图书馆斩版本。

Answer 11:

我用下摆NPM，我想补充一点，我觉得没有涉及到目前为止一些额外的好处。

• 下摆有一个自包含的Web服务器（阶层），这样你可以开发你的代码，甚至无需重新编译。 我从来没有使用hem build ，除非我在发布应用。
• 你并不需要使用Spine.js使用下摆，你可以使用它，如果你设置了slug.json正确编译任意的CoffeeScript包。 这是我的包之一就是自动编译cakefile： https://github.com/HarvardEconCS/TurkServer/tree/master/turkserver-js-client
• 在谈到上述情况，下摆让你其他依赖本地系统上与NPM链接链接和无缝地结合他们，即使您正在使用的地层服务器。 事实上，你甚至不需要使用cake上面的方法，你可以直接链接从相关项目的CoffeeScript。
• 下摆支持eco （嵌入式的CoffeeScript）的意见和手写笔CSS，并编译所有的，与你的CoffeeScript一起，成为一个JS和CSS一个文件。

以下是获取设置与脊柱，下摆，CoffeeScript的应用基本清单。 随意忽略脊骨零件。 其实，有时我用spine app建立一个目录结构非脊椎的应用程序，然后编辑slug.json更改为不同的编译结构。

1. 安装NPM： curl http://npmjs.org/install.sh | sh 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将称为脊柱项目app在folder ，产生正确的目录结构和一堆骨架的文件开始。
5. cd到文件夹和编辑dependencies.json您需要的库。 他们加入slug.json让下摆知道哪里可以找到他们。
6. 可选： npm link在发展的任何本地包，以node_modules ，你可以将它们添加到slug.json下摆（可以是index.js直接包括或index.coffee如果你想下摆进行编译。）
7. npm install . 下载您刚才输入的所有依存关系。

8. 如果你看看在默认配置脊椎，有一个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来生成控制器和模型模板。 典型的脊柱控制器如下所示，使用的节点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技术，您的应用程序的其余部分，并使用手写笔的CSS和生态的观点。 或者不使用脊柱可言，和下摆仍然将CoffeeScript的和新公共管理工作的伟大。 还有的利用这两种模式的项目很多例子。

还有一两件事：通常情况下， hem server为您更新代码，并保存文件，这使得它不在话下调试将自动更新。 运行hem build将编译你的应用程序分为两个文件， application.js ，其中的微细化以及application.css 。 如果您运行hem server在此之后，它将使用这些文件并不再自动更新。 所以不要hem build ，直到你真正需要你的应用程序部署的缩小版本。

其他参考： Spine.js和下摆入门

Answer 12:

如下是一个非常不同的方法解决：包了所有的模块集成到一个JSON对象，并需要通过读取和执行，无需额外申请文件内容的模块。

纯客户方演示实现： http://strd6.github.io/editor/

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

STRd6 /需要取决于其在运行时可用一个JSON包。 的require为该包生成功能。 该软件包包含了所有你的应用程序可能需要的文件。 没有进一步的http请求是由因为包捆绑所有依赖。 这是接近一个可以获取到Node.js的风格需要在客户端上。

封装的结构是如下所示：

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

不同于节点包不知道它的外部名称。 这是达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

该外部上下文提供了一些变量模块具有访问。

甲require功能暴露于模块，因此它们可能需要的其他模块。

如参照全局对象和一些元数据中的其他属性也被露出。

最后，我们的模块和给定的上下文中执行的程序。

这个答案将是最有帮助的那些谁希望有一个同步的node.js风格需要在浏览器中陈述和不感兴趣的远程脚本加载解决方案。

Answer 13:

退房cartero如果您在使用后端节点/快递。

Answer 14:

我建议你检查了Dojo工具包 ，这似乎满足您的大多数要求。 在一个我不知道的是CoffeeScript的。

道场的工作写在异步模块定义（AMD）格式模块。 它与包构建系统，你可以在一个或多个文件（称为层），它们聚集。 显然，它接受的Git仓库类型，在这里构建系统的更多细节：

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

为了记录在案，V1.9测试版预计下个月。

Answer 15:

满足我的所有准则另一个框架最近公布： http://duojs.org/ （也支持治疗其他资源，如CSS的依赖）。

Answer 16:

依赖注入与异步加载+ browserify将是另一个不错的选择，比较requirejs

异步前端的依赖管理，而无需-AMD

文章来源: How to manage client-side JavaScript dependencies? [closed]