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

Question

虽然有很好的解决方案可以管理服务器端的依赖关系,但我找不到任何满足我所有需求的连接客户端JavaScript依赖关系管理工作流程.我想满足这5个要求:

1. 管理我的客户端依赖于类似故宫的格式的package.json或亭子的bower.json
2. 它应该具有灵活性,可以指向我dependency.json文件中的git repo或实际js文件(在web或本地),用于鲜为人知的库(npm让你指向git repos)
3. 它应该将所有库缩小并命名为单个文件,如ender - 这是我需要<script>在客户端标记中放入的唯一js文件
4. 它应该像BoxJS 4(现已死)一样对CoffeeScript提供开箱即用的支持

5. 在浏览器中,我应该能够使用require样式:

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

   或者更好的是,做headjs风格:

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

如果不存在这样的单一工具,那么什么是最好的工具组合,即我可以使用诸如volo(或grunt)之类的东西组合的工具链？

我已经研究了我在这里链接的所有工具,它们最多只能满足我最多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文件.

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

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

以下是您的要求:

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

• 我应该可以灵活地指向我的dependency.json文件中的git repo或实际的js文件(无论是在web上还是在本地),用于鲜为人知的库(npm让你指向git repos).是

• 它应该将所有库缩小并命名为单个文件,如ender - 这是我需要在客户端的脚本标记中放入的唯一js文件.是的r.js.

• 它应该像Box一样支持coffeescript.是

• 在浏览器中,我可以使用require style或headjs.是

Answer 2

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

Answer 3

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

在下摆依赖性使用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模块.这很简单 - 请参阅下摆文档.

本地文件

如果你想要包含非CommonJS非'require'代码,你也可以通过slug.json中的'libs'列表引用你的自定义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

笔记

Hem适用于spinejs项目 - 但您不必使用它.忽略任何提及脊柱的文档...

Answer 4

嗯,我很惊讶没有人提到Browserify.

1. 支持package.json格式
2. 使用下面的npm,可以使用github(或任何git)repo作为包源
3. 将所有依赖项缩小并连接到单个文件中.
4. 如果将coffeescript包含在依赖项中,则支持coffeescript
5. 要求风格一路走来.
6. 支持源地图

Answer 5

我很确定Hem符合你的要求(我使用带有额外编译器的人工叉 - 玉器和手写笔 - 它可以根据您的需求轻松定制).它使用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传递这些模块,因此您不必这样做.

所有功能:

Lightning-fast scaffolding - 使用可自定义的模板(例如HTML5 Boilerplate,Twitter Bootstrap),RequireJS等轻松搭建新项目.

伟大的构建过程 - 不仅可以缩小和连接; 我还优化了所有的图像文件,HTML,编译你的CoffeeScript和Compass文件,如果你使用AMD,我会通过r.js传递这些模块,所以你没必要.

自动编译CoffeeScript和指南针 - 我们的LiveReload监视进程会自动编译源文件,并在您进行更改时刷新浏览器,因此您不必这样做.

自动lint脚本 - 所有脚本都自动针对JSHint运行,以确保它们遵循语言最佳实践.

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

令人敬畏的图像优化 - 我使用OptiPNG和JPEGTran优化您的所有图像,因此您的用户可以花更少的时间下载资产,并花更多的时间使用您的应用.

杀手包管理 - 需要依赖吗？这只是一个击键.我允许您通过命令行轻松搜索新包(例如`bower search jquery),安装它们并保持更新,而无需打开浏览器.

PhantomJS单元测试 - 通过PhantomJS轻松运行无头WebKit中的单元测试.当您创建新应用程序时,我还为您的应用程序添加了一些测试脚手架.

Answer 7

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