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

Question

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

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

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

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

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

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

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

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

Answer 1

require.js 可以满足您的一切需求。

我对this问题的回答可能会对您有所帮助

例子：

客户端应用项目层次结构：

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

ma​​in.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文件。

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

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

这是您的要求：

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

• 我应该可以灵活地指向 git repo 或实际的 js 我的dependency.json文件中的文件（在网络上或本地） 鲜为人知的库（npm 让你指向 git repos）。 是

• 它应该将所有库压缩并命名为单个文件，例如 ender - 这是我需要放入脚本标签的唯一 js 文件 在客户端。 YES 使用 r.js。

• 它应该对像 Box 这样的咖啡脚本提供开箱即用的支持。 是

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

Answer 2

http://requirejs.org/ 我相信你正在寻找的人

Answer 3

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

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

我为此创建了一个框架项目，因此您可以看到它是如何工作的 - 您可以在 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 模块。这很简单—— 见the hem docs。

本地文件

如果您想包含非 CommonJS 非“需要”代码，您也可以将其缝合 通过“libs”列表引用您的自定义 javascript 或 coffeescript slug.json。

CSS

如果您愿意，Hem 也可以将您的 CSS 拼接在一起。见the hem docs。

建筑

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

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

注意事项

Hem 是为 spinejs 项目设计的 - 但你没有 必须为此使用它。根据需要忽略任何提及脊椎的文档...

Answer 4

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

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

Answer 5

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

Answer 6

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

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

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

至于你的要求：

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

所有功能：

闪电般快速的脚手架 — 使用以下工具轻松搭建新项目 可定制的模板（例如 HTML5 Boilerplate、Twitter Bootstrap）、 RequireJS 等等。

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

自动编译 CoffeeScript 和 Compass — 我们的 LiveReload 手表 进程自动编译源文件并刷新浏览器 无论何时进行更改，您都不必这样做。

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

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

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

Killer 包管理 — 需要依赖项？这只是一个按键 离开。我允许您通过 命令行（例如`bower search jquery），安装并保留它们 无需打开浏览器即可更新。

PhantomJS 单元测试 — 通过 PhantomJS 在无头 WebKit 中轻松运行单元测试。什么时候 您创建一个新应用程序，我还包括一些测试脚手架 你的应用程序。

Answer 7

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

Answer 8

看看Jam package manager。以下是其主页的描述

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

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

如下所示安装包

jam install backbone

通过执行使包保持最新

jam upgrade
jam upgrade {package} 

为生产优化包

jam compile compiled.min.js

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

完整文档请阅读Jam Documentation

Answer 9

我刚刚遇到inject.js

部分功能，来自project site：

Inject（Apache 软件许可证 2.0）是一种以与库无关的方式管理依赖项的革命性方法。它的一些主要功能包括：

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

Answer 10

有几个选项：

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

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

Answer 11

我将 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方法其实都不需要，直接从依赖项目链接到coffeescript即可。
• Hem 支持视图的 eco（嵌入的 Coffeescript）和 CSS 的 Stylus，并将所有这些与您的 Coffeescript 一起编译成一个 JS 和一个 CSS 文件。

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

1. 在 *nix 系统上安装 NPM：curl http://npmjs.org/install.sh | sh。我假设它可以从命令行获得。
2. 全局安装 hem (npm install -g hem)。开发最近已经分支，因此您可能希望直接从 github (https://github.com/spine/hem) 中获取它，签出一个分支，然后在该文件夹中 npm install -g .。
3. npm install -g spine.app 将使spine 可作为全局命令使用
4. spine app folder 将在 folder 中创建一个名为 app 的 Spine 项目，生成正确的目录结构和一堆骨架文件以供开始使用。
5. cd 到文件夹并编辑 dependencies.json 以获得您需要的库。将它们添加到 slug.json 以便 hem 也知道在哪里可以找到它们。
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 为控制器和模型生成模板。典型的 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 启动一个hem 服务器，然后导航到localhost:9294 以查看您的应用程序。 （如果你全局安装了 hem。）它有一些隐藏的参数，例如 --host 0.0.0.0 监听所有端口。
13. 使用适当的 MVC 技术构建应用程序的其余部分，并为 CSS 使用手写笔，为视图使用 eco。或者根本不使用 Spine，hem 仍然可以很好地与 Coffeescript 和 npm 一起使用。有许多使用这两种模型的项目示例。

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

其他参考：Spine.js & hem getting started

Answer 12

这是一个采用非常不同方法的解决方案：将所有模块打包成一个 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 语句并且对远程脚本加载解决方案不感兴趣的人最有帮助。

Answer 13

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

Answer 14

我建议查看dojo toolkit，它似乎可以满足您的大部分要求。我不确定的是 CoffeeScript。

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

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

据记录，v1.9 测试版预计下个月。

Answer 15

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

Answer 16

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

asynchronous-frontend-dependency-management-without-AMD