如何管理客户端 JavaScript 依赖项？[已结束]

我相信，RequireJS 就是你要找的那个。

我很确定 Hem 符合您的要求（我使用带有附加编译器、Jade 和 Stylus 的个人分支。它很容易根据您的需求进行定制）。它使用 npm 来管理依赖项。

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

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

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

安装如下所示的软件包：

jam install backbone

通过执行以下命令使包保持最新：

jam upgrade
jam upgrade {package}

优化生产包装

jam compile compiled.min.js

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

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

Bower 可能适合您的需求 （1）。（2）对于其余部分，你有RequireJS。

从自述文件：

Bower 是 Web 的包管理器。Bower 可让您轻松安装图像、CSS 和 JavaScript 等资产，并为您管理依赖项。

要安装软件包，请执行以下操作：

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

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

在 Hem 中，依赖项使用 npm 和 Hem 的组合进行管理。使用 npm 显式安装所有项目的外部依赖项。使用 Hem 指定应为客户端操作拼接在一起的依赖项（外部和本地）。

我创建了一个骨架项目，所以你可以看到它是如何工作的。您可以在客户端下摆上看到它。

添加依赖项

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

例如，假设您要添加 CoffeeScript 依赖项。只需使用 npm 安装依赖项并将其保存到您的 package.json 文件中：

1. npm --save install coffee-script
2. 手动编辑slug.json文件。将“coffee-script”添加到“dependencies”中。

假设您想包含自己的模块“bloomfilters”，但它不在 npm 注册表中。您可以通过以下方式将其添加到您的项目中：

1. npm --save install https://github.com/dsummersl/bloomfilters/tarball/master
2. 手动编辑slug.json文件。将“bloomfilters”添加到“dependencies”中。

本地模块

如果您想包含自己的 CoffeeScript 或 JavaScript 代码，可以通过将这些文件添加到 app/ 文件夹来实现。请注意，为了通过“require”方法公开您的脚本，您必须使其成为 CommonJS 模块。这很简单，请参阅 Hem 文档。

本地文件

如果你想包含非 CommonJS 非“require”代码，你也可以通过 'libs' 列表中引用你的自定义 JavaScript 或 CoffeeScript 代码来拼接它 文件slug.json。

CSS的

如果你愿意，Hem 也会把你的 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 是为 Spine.js 项目准备的 - 但你不必为此使用它。随心所欲地忽略任何提及脊柱的文档......

您可能想看看 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 手表 进程自动编译源文件并刷新浏览器 每当进行更改时，您就不必这样做。

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

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

令人敬畏的图像优化 — 我使用 OptiPNG 和 JPEGTran 优化您的所有图像，以便您的用户可以花更少的时间下载资产，而将更多的时间用于使用您的应用程序。

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

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

还有 Browserify。

1. 支持package.json格式
2. 在下面使用 npm，它可以使用 GitHub（或任何 Git）存储库作为包源
3. 缩小所有依赖项并将其连接到单个文件中。
4. 如果将 CoffeeScript 包含在依赖项中，则支持它
5. 要求风格一路走来。
6. 支持源映射

有几个选项：

• Browserify，允许您导入模块
• RequireJS 解决了同样的问题
• 一个似乎正在积极开发中的是 JoinJS

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

RequireJS 可以满足您的一切需求。

我对这个问题的回答可能会对您有所帮助。

例：

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

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

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

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.js
        }
    }
});

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

以下是您的要求：

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

• 我应该可以灵活地指向 Git 存储库或我的 dependency.json 文件中的实际 JavaScript 文件（无论是在 Web 上还是在本地），用于鲜为人知的库（npm 允许您指向 Git 存储库）。是的

• 它应该将所有库缩小并命名到一个文件中，例如 Ender。这是我唯一需要放在客户端的脚本标签中的 JavaScript 文件。是的，使用 r.js。

• 它应该像 Box 一样对 CoffeeScript 提供开箱即用的支持。是的

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

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

• Hem 有一个独立的 Web 服务器 （Strata），因此您甚至可以开发代码，甚至不需要重新编译。除非我正在发布应用程序，否则我从不使用。hem build
• 您无需使用 Spine.js 即可使用 Hem。如果正确设置了文件slug.json，则可以使用它来编译任意 CoffeeScript 包。这是我的一个包，它是用cakefile自动编译的：TurkServer
• 说到上述内容，Hem 允许您使用 npm 链接将本地系统上的其他依赖项链接起来，即使您使用 Strata 服务器，也可以将它们无缝组合在一起。事实上，您甚至不需要使用上述方法;您可以从依赖项目直接链接到 CoffeeScript。cake
• Hem 支持（嵌入式 CoffeeScript）用于视图和 Stylus 用于 CSS，并将所有这些以及您的 CoffeeScript 代码编译为一个 JavaScript 文件和一个 CSS 文件。eco

下面是设置 Spine.js、Hem 和 CoffeeScript 应用程序的基本列表。随意忽略 Spine.js 部分。事实上，有时我习惯于为非Spine.js应用程序设置目录结构，然后编辑文件slug.json以更改为不同的编译结构。spine app

1. 安装 NPM：在类 Unix 系统上。我假设它可以从命令行获得。curl http://npmjs.org/install.sh | sh

2. 全局安装 Hem （）。开发最近已经分支了，所以你可能想直接从 GitHub 中获取它，签出一个分支，然后在该文件夹中。npm install -g hemnpm install -g .

3. npm install -g spine.app将作为全局命令提供spine

4. spine app folder将制作一个 Spine 项目调用 ，生成正确的目录结构和一堆骨架文件以开始。appfolder

5. cd 到文件夹并编辑所需库的文件dependencies.json。将它们添加到文件slug.json，以便 Hem 也知道在哪里可以找到它们。

6. 可选：将开发中的任何本地包添加到文件夹node_modules，您可以将它们添加到 Hem 的文件slug.json（直接包含索引.js文件，或者如果希望 hem 编译它，则可以添加 index.coffee 文件。npm link

7. npm install .下载您刚刚输入的所有依赖项。

8. 如果你看一下默认的脊柱配置，就会发现你从依赖项中需要的所有库。例子：app/lib/setup.coffeerequire

    # 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.js was installed via file 'dependencies.json'
    require 'd3/d3.v2'
   

9. 在文件 index.coffee 中，您只需执行并加载应用程序的主控制器即可。此外，您需要对其他控制器中的任何其他类执行此操作。您可以使用或生成控制器和模型的模板。典型的Spine控制器如下所示，使用Node.js'：require lib/setuprequirespine controller somethingspine model somethingrequire

    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. 从 运行以启动 Hem 服务器，然后导航到以查看您的应用程序（如果全局安装了 Hem）。它有一些隐藏的参数，例如，侦听所有端口。folderhem serverlocalhost:9294--host 0.0.0.0

13. 使用适当的 MVC 技术构建应用程序的其余部分，并使用触笔进行 CSS，将 eco 用于视图。或者根本不使用 Spine，Hem 仍然可以很好地与 CoffeeScript 和 npm 配合使用。有许多使用这两种模型的项目示例。

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

其他参考资料：脊柱.js和下摆：入门

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

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

根据记录，v1.9 测试版预计将于下个月发布。

这里有一个解决方案，它采用了一种非常不同的方法：将所有模块打包到一个 JSON 对象中，并通过读取和执行文件内容来要求模块，而无需额外的请求。

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

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

STRd6/require 依赖于在运行时是否有一个可用的 JSON 包。该函数是为该包生成的。该包包含应用可能需要的所有文件。不会再发出 HTTP 请求，因为包捆绑了所有依赖项。这与客户端上的 Node.js 样式要求尽可能接近。require

该包的结构如下：

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

与 Node.js 不同，包不知道其外部名称。由包（包括依赖项）来命名它。这提供了完整的封装。

鉴于所有这些设置，这里有一个从包中加载文件的函数：

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 语句并且对远程脚本加载解决方案不感兴趣的人最有帮助。

如果您在后端使用 Node.js 或 Express.js，请查看 Cartero。

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

与 RequireJS 相比，具有异步加载和 Browserify 的依赖注入将是另一个不错的选择。

asynchronous-frontend-dependency-management-without-AMD

我刚刚遇到了注入.js

项目网站的一些功能：

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

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