javascript - 如何管理客户端 JavaScript 依赖项？

Question

尽管有很好的解决方案来管理服务器端的依赖项，但我找不到任何能满足我所有需要的解决方案，即拥有一个连贯的客户端 JavaScript 依赖项管理工作流程。我想满足这5个要求：

以类似于 npm 的package.json或bower的格式管理我的客户端依赖项bower.json
dependency.json对于鲜为人知的库，它应该可以灵活地指向我的文件中的 git repo 或实际的 js 文件（在网络上或本地）（npm 让您指向 git repos）
它应该将所有库缩小并命名为单个文件，如ender - 这是我需要<script>在客户端的标签中放入的唯一 js 文件
它应该对像 BoxJS 4这样的 CoffeeScript 提供开箱即用的支持（现在已经死了）

在浏览器中，我应该可以使用任一require样式：

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

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

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

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

我已经研究了我在这里链接的所有工具，它们最多只能满足我的三个要求。因此，请不要再次发布有关这些工具的信息。我只会接受一个提供满足我所有 5 个要求的单个工具的答案，或者如果有人发布了多个此类工具的工具链的具体工作流/脚本/工作示例，这些工具也满足我的所有要求。谢谢你。

score 45 · Accepted Answer

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 插件编译咖啡脚本文件。

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

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

以下是您的要求：

以类似于 npm 的 package.json 或 bower 的 component.json 的格式管理我的客户端依赖项。不同但一样好！
对于鲜为人知的库（npm 让您指向 git repos），我应该可以灵活地在我的 dependency.json 文件中指向 git repo 或实际的 js 文件（在 web 上或本地）。是的
它应该将所有库缩小并命名为单个文件，如 ender - 这是我需要放入客户端脚本标签的唯一 js 文件。是的 r.js。
它应该对像 Box 这样的咖啡脚本有开箱即用的支持。是的
在浏览器中，我可以使用 require 样式或 headjs。是的

score 24 · Accepted Answer

24

http://requirejs.org/是你要找的我相信

于 2012-10-15T09:52:21.513 回答

score 15 · Accepted Answer

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

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

我创建了一个框架项目，这样你就可以看到它是如何工作的 - 你可以在https://github.com/dsummersl/clientsidehem看到它

添加依赖项

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

例如，假设您想添加 coffee-script 依赖项。只需使用 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，您可以通过将这些文件添加到 app/ 文件夹来实现。请注意，为了通过 'require' 方法公开您的脚本，您必须将其设为 CommonJS 模块。这非常简单 - 请参阅hem 文档。

本地文件

如果您想包含非 CommonJS 非“需要”代码，您还可以通过 slug.json 中的“库”列表引用您的自定义 javascript 或咖啡脚本来缝合它。

CSS

如果你愿意，下摆也会将你的 CSS 缝合在一起。请参阅下摆文档。

建造

列出依赖项后，您可以使用 hem 将它们拼接在一起。

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

笔记

Hem 是为spinjs项目设计的——但你不必为此使用它。根据需要忽略任何提及脊椎的文档...

score 11 · Accepted Answer

好吧，我很惊讶没有人提到Browserify。

支持 package.json 格式
在下面使用 npm，它可以使用 github（或任何 git）repo 作为包源
将所有依赖项缩小并连接到一个文件中。
如果您将其包含在依赖项中，则支持咖啡脚本
一路需要风格。
支持源地图

score 9 · Accepted Answer

我很确定Hem满足您的要求（我使用带有附加编译器的个人叉子 - 玉石和手写笔 - 很容易根据您的需要进行定制）。它使用 npm 来管理依赖关系。

score 5 · Accepted Answer

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

我们的工作流程由三个工具组成，用于在构建 Web 应用程序时提高您的生产力和满意度：yo（脚手架工具）、grunt（构建工具）和bower（用于包管理）。

内置对 CoffeeScript、Compass 等的支持。适用于 r.js ( RequireJS )、单元测试等。

至于你的要求：

Bower 用于依赖管理
Bower 可以处理本地文件、git://、http:// 等
对缩小和连接的内置支持（即使是您的图像）
内置支持自动编译 CoffeeScript 和 Compass（使用 LiveReload）
如构建过程中所述：如果您使用的是 AMD，我将通过 r.js 传递这些模块，因此您不必这样做。

所有功能：

闪电般的脚手架— 使用可自定义的模板（例如 HTML5 Boilerplate、Twitter Bootstrap）、RequireJS 等轻松构建新项目。

伟大的构建过程——你不仅得到了缩小和连接；我还优化了您的所有图像文件、HTML、编译您的 CoffeeScript 和 Compass 文件，如果您使用 AMD，我将通过 r.js 传递这些模块，这样您就不必这样做了。

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

自动检查您的脚本——您的所有脚本都会自动针对 JSHint 运行，以确保它们遵循语言最佳实践。

内置预览服务器——不再需要启动您自己的 HTTP 服务器。我的内置一个可以只用一个命令来触发。

很棒的图像优化——我使用 OptiPNG 和 JPEGTran 优化了你的所有图像，这样你的用户就可以花更少的时间下载资源，而有更多的时间使用你的应用程序。

杀手包管理——需要依赖吗？只需按一下键即可。我允许您通过命令行轻松搜索新包（例如，`bower search jquery），安装它们并保持更新，而无需打开浏览器。

PhantomJS 单元测试——通过 PhantomJS 在无头 WebKit 中轻松运行单元测试。当您创建一个新应用程序时，我还会为您的应用程序添加一些测试脚手架。

score 4 · Accepted Answer

Bower可能满足您的需求 (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

score 2 · Accepted Answer

查看Jam 包管理器。以下是其主页的描述

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

它的工作方式似乎与 npm 非常相似。

安装包如下

jam install backbone

通过执行使包保持最新

jam upgrade
jam upgrade {package}

优化生产包

jam compile compiled.min.js

可以在package.json文件中添加 Jam 依赖项。

如需完整文档，请阅读Jam 文档

score 2 · Accepted Answer

我刚刚遇到了inject.js

来自项目站点的一些功能：

Inject (Apache Software License 2.0) 是一种以与库无关的方式管理依赖项的革命性方法。它的一些主要功能包括：

浏览器中的 CommonJS 合规性（导出。*）

查看完整的 CommonJS 支持矩阵

文件的跨域检索（通过easyXDM）

localStorage（加载一个模块一次）

score 1 · Accepted Answer

有几个选项：

http://browserify.org/允许您导入模块
RequireJS解决了同样的问题
似乎正在积极开发的一个是JoinJS

组件可能也很有趣，它本身并不管理依赖项，但允许您使用其他大型库的切碎版本。

score 1 · Accepted Answer

我将 hem 与 npm 一起使用，并且我想添加一些我认为目前尚未涵盖的额外好处。

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

这是设置 Spine、hem、coffeescript 应用程序的基本列表。随意忽略 Spine 部分。事实上，有时我会spine app为非 Spine 应用程序设置目录结构，然后编辑slug.json以更改为不同的编译结构。

安装 NPM:curl http://npmjs.org/install.sh | sh在 *nix 系统上。我假设它可以从命令行获得。
全局安装下摆 ( npm install -g hem)。开发最近已经分支，因此您可能希望直接从 github ( https://github.com/spine/hem ) 中获取它，签出一个分支，然后npm install -g .在该文件夹中。
npm install -g spine.app将使脊柱作为全局命令可用
spine app folder将创建一个名为appin的 Spine 项目folder，生成正确的目录结构和一堆骨架文件以开始使用。
cd文件夹并编辑dependencies.json您需要的库。添加它们，slug.json以便下摆也知道在哪里可以找到它们。
可选：npm link任何你正在开发的本地包node_modules，你可以将它们添加到slug.jsonhem （index.js直接包含或者index.coffee如果你想要 hem 编译它。）
npm install .下载您刚刚输入的所有依赖项。

如果您查看默认的主干配置，您可以从依赖项中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'

在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

生成的默认值index.html通常可以很好地加载您的应用程序，但可以根据需要进行修改。根据您的要求，它只引入js一个css文件，您无需修改。
根据需要在css文件夹中编辑您的触控笔文件。它比 CSS 灵活得多 :)
从开始folder，运行hem server以启动 hem 服务器，然后导航localhost:9294以查看您的应用程序。（如果你全局安装了 hem。）它有一些隐藏的参数，例如--host 0.0.0.0监听所有端口。
使用适当的 MVC 技术构建应用程序的其余部分，并使用 stylus 获取 CSS 和 eco 获取视图。或者根本不使用 Spine，hem 仍然可以很好地与 Coffeescript 和 npm 一起使用。有许多使用这两种模型的项目示例。

还有一件事：通常，hem server当您更新代码和保存文件时，它会自动更新，这使得调试变得轻而易举。运行hem build会将您的应用程序编译成两个文件，application.js分别是 . 和application.css. 如果您hem server在此之后运行，它将使用这些文件并且不再自动更新。hem build因此，在您真正需要应用程序的缩小版本进行部署之前，请不要这样做。

其他参考：Spine.js & hem 入门

score 1 · Accepted Answer

这是一个采用非常不同方法的解决方案：将所有模块打包成一个 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

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

一个require函数暴露给模块，因此它们可能需要其他模块。

还公开了其他属性，例如对全局对象的引用和一些元数据。

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

对于那些希望在浏览器中使用同步 node.js 样式的 require 语句并且对远程脚本加载解决方案不感兴趣的人，这个答案将是最有帮助的。

score 1 · Accepted Answer

1

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

于 2014-01-14T02:08:27.060 回答

score 0 · Accepted Answer

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

dojo 使用以异步模块定义 (AMD) 格式编写的模块。它有一个包含包的构建系统，您可以将它们聚合到一个或多个文件（称为层）中。显然它接受 git 类型的存储库，这里有关于构建系统的更多细节：

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

根据记录，v1.9 beta 预计下个月。

score 0 · Accepted Answer

另一个满足我最近发布的所有标准的框架：http: //duojs.org/（并且还支持将 CSS 等其他资源视为依赖项）。

score 0 · Accepted Answer

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

没有 AMD 的异步前端依赖管理

javascript - 如何管理客户端 JavaScript 依赖项？

16 回答 16

添加依赖项

本地模块

本地文件

CSS

建造

笔记

Related

Reference