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

Posted 2023-03-03

技术标签:

【中文标题】如何管理客户端 JavaScript 依赖项？ [关闭]【英文标题】：How to manage client-side JavaScript dependencies? [closed] 【发布时间】：2012-10-05 06:35:42 【问题描述】：

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

bower.json

dependency.json

<script>

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

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

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

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

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

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

【问题讨论】：

类似requirejs.org ? 对于将节点的require 语法移植到浏览器的更“节点风格”的解决方案，请考虑browserify 你能说得更清楚些吗？在我的问题的 5 个要点中，我认为 requirejs/browserify 只满足一两点。我正在寻找一种工具（或工具链），可以满足我的所有五个要求我还没有尝试过，但也许yeoman.io 也是一个不错的选择我刚听说 onejs - 听起来有点相关：github.com/azer/onejs 【参考方案1】：

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

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

例子：

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

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文件。

当您进入 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。是

【讨论】：

如果我使用r.js，我可以简单地拉入所有库的非缩小版本，或者我应该如何在缩小和非缩小库之间做出决定？唯一的问题是这个 requireJS 废话，你必须携带缩小代码。 @Andy 不一定！你可以用小得多的杏仁来代替！【参考方案2】：

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

【讨论】：

感谢您。不知道这存在于nodejs之外谢谢！如果您觉得它解决了目的，请将我的答案标记为正确的！我不是问这个问题的人 xD 哎呀对不起！没注意我很困惑。 requirejs 究竟如何从互联网上提取任意 javascript 文件（我不是在谈论它的 repo 中的那些，比如 jquery，而是不太出名的那些）？它可以读取 package.json 文件吗？而且它不适用于 CoffeeScript……我错过了什么吗？？【参考方案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 项目设计的 - 但你没有必须为此使用它。根据需要忽略任何提及脊椎的文档...

【讨论】：

+1 表示努力详细介绍；）【参考方案4】：

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

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

【讨论】：

您可以将任何 github 存储库（或 bower 包）与 browserify 一起使用吗？这需要napa 之类的东西吗？ npmjs.org/package/napa【参考方案5】：

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

【讨论】：

通过阅读这个特定问题，我认为这可以很好地解决 1,3,5 的问题。对于＃2，您可以将自己的本地 JS 包放在 node_modules 中（它使用本地 npm），并且您可以将 git submodule 用于仅对 git 的任何依赖项。对于＃4，我认为您必须在运行 hem 之前自己将咖啡编译为 js（这很容易）。感谢您的评论，但是 hem 编译我的咖啡脚本没有问题 :)，它最初是为 Spine.js 制作的，它是一个面向咖啡脚本的框架，所以这是一个基本要求我知道它适用于类似脊椎的应用程序（即将咖啡放入 app/...）但是包含咖啡脚本的外部模块呢？我认为这就是 wrick 的要求，但我可能完全错了...... 好吧我不知道它是否为外部模块编译coffeescript但我认为它没有用，外部模块通常提供编译后的JS :) 是的，我同意。它进入了制作 cakefile/grunt 的领域......【参考方案6】：

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

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

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

至于你的要求：

如果您使用 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 中轻松运行单元测试。什么时候您创建一个新应用程序，我还包括一些测试脚手架你的应用程序。

【讨论】：

请对-1发表评论？【参考方案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

【讨论】：

我已经研究了我在我的 OP 中链接到的所有那些（包括 Bower），但没有一个恰好满足我 5 个要求中的 3 个以上。我正在寻找一个工具（或工具组合）来解决我的所有 5 个问题。不知道这是否值得一票否决，我说 bower+requirejs 可能适合您的需要。您说您也对“工具的最佳组合”持开放态度。祝您搜索顺利这有什么问题：(1) bower (2) 还有 bower (3)requirejs build (4) 你已经安装了节点没有？ (5) 需要js【参考方案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

【讨论】：

【参考方案9】：

我刚刚遇到inject.js

部分功能，来自project site：

Inject（Apache 软件许可证 2.0）是一种以与库无关的方式管理依赖项的革命性方法。它的一些主要功能包括：
浏览器中的 CommonJS 合规性（导出。*）查看完整的 CommonJS 支持矩阵文件的跨域检索（通过easyXDM） localStorage（加载一个模块一次）

【讨论】：

我喜欢注入。它比 RequireJS 干净得多，几乎就像用 node 编写一样。【参考方案10】：

有几个选项：

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

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

【讨论】：

【参考方案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 以更改为不同的编译结构。

curl http://npmjs.org/install.sh | sh

npm install -g hem

npm install -g .

npm install -g spine.app

spine app folder

folder

app

cd

dependencies.json

slug.json

npm link

node_modules

slug.json

index.js

index.coffee

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

folder

hem server

localhost:9294

--host 0.0.0.0

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

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

【讨论】：

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

【讨论】：

【参考方案13】：

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

【讨论】：

【参考方案14】：

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

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