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

Although there are great solutions to manage dependencies on the server side, I could not find any that satisfies all my needs to have a coherent client side JavaScript dependency management workflow. I want to satisfy these 5 requirements:

尽管在服务器端管理依赖项有很好的解决方案，但我找不到任何能够满足我对具有一致的客户端JavaScript依赖项管理工作流的所有需求的解决方案。我想满足以下5个要求:

1. Manage my client side dependencies in a format similar to npm's package.json or bower's bower.json
2. 以类似于npm包的格式管理客户端依赖项。json或凉亭bower.json
3. It should have the flexibility to point to git repo or actual js files (either on web or locally) in my dependency.json file for lesser known libraries (npm let you point to git repos)
4. 它应该具有灵活性，可以在我的依赖项中指向git repo或实际的js文件(在web上或本地上)。不太知名的库的json文件(npm允许您指向git repos)
5. It should minify and namespace all libraries into a single file like ender - that's the only js file I would need to put in my <script> tag in the client side
6. 它应该将所有库缩小并命名为一个文件(如ender)—这是我需要在客户端中放入
7. It should have out of box support for CoffeeScript like BoxJS4 (now dead)
8. 它应该有开箱即用的对CoffeeScript的支持，比如BoxJS4(现在已经死了)

9. In the browser, I should be able to use either require style:

   在浏览器中，我应该能够使用任何一种需要的样式:

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

   Or better yet, do headjs style:

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

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

If no one such single tool exists, what is the best combination of tools i.e. a tool-chain that I can combine using something like volo (or grunt)?

如果没有这样单一的工具存在，那么最好的工具组合是什么?例如，我可以使用volo(或grunt)之类的工具链组合?

I have already researched all the tools I have linked to in here and they satisfy only upto 3 of my requirements at best individually. So, please don't post again about these tools. I would only accept an answer that provides a single tool that satisfies all 5 of my requirements or if someone posts a concrete workflow/script/working example of a toolchain of multiple such tools that also satisfies all my requirements. Thank you.

我已经研究了我在这里链接的所有工具，它们最多只能满足我的3个需求。所以，请不要再发布这些工具。我只接受提供满足我所有5个需求的单一工具的答案，或者如果有人发布了一个具体的工作流/脚本/工作示例，其中包含多个这样的工具链，并且满足了我所有的需求。谢谢你！

16 个解决方案

#1

require.js does everything you need.

要求。js做你需要的一切。

My answer to this question may help you

我对这个问题的回答可能对你有帮助

Example:

例子:

Client app project hierarchy:

客户端应用程序项目层次结构:

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

main.js is where you initialize your client application and configure require.js:

主要。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
});

Dependencies will use the cs plugin when prepended by "cs!". The cs plugin compiles the coffeescript file.

当以“cs!”开头时，依赖项将使用cs插件。cs插件编译coffeescript文件。

When you go in prod, you can pre-compile your whole project with r.js.

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

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

Here are your requirements:

这是你们的要求:

• Manage my client side dependencies in a format similar to npm's package.json or bower's component.json. Different but AS GOOD!

  以类似于npm包的格式管理客户端依赖项。json或凉亭component.json。不同,但一样好!

• I should have the flexibility to point to git repo or actual js files (either on web or locally) in my dependency.json file for lesser known libraries (npm let's you point to git repos). YES

  我应该能够灵活地在依赖项中指出git repo或实际的js文件(在web上或本地上)。不太知名库的json文件(npm，让我们指向git repos)。是的

• It should minify and namespace all libraries into a single file like ender - that's the only js file I would need to put in my script-tag in the client side. YES with r.js.

  它应该将所有库缩小并命名为一个文件(如ender)—这是我需要在客户端中放入脚本标记的惟一js文件。是的r.js。

• It should have out of box support for coffeescript like Box. YES

  它应该对像box这样的coffecript有现成的支持。是的

• In the browser I can use either require style or headjs. YES

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

#2

http://requirejs.org/ is the one you are looking for i believe

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

#3

As @Guillaume86 I think hem will get you the closest to where you want to be.

作为@Guillaume86，我认为哼哼会让你离你想去的地方最近。

In hem dependencies are managed using a combination of npm and hem. Use npm to explicitly install all of your projects external dependencies. Use hem to specify which dependencies (both external and local) should be stitched together for you client side operations.

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

I created a skeleton project of this so you can see how this would work - you can see it at https://github.com/dsummersl/clientsidehem

我创建了一个框架项目，以便您可以看到它是如何工作的——您可以在https://github.com/dsummersl/clientsidehem看到它

Adding dependencies

Use npm to search for a specific dependency and then modify the package.json file to ensure that the dependency is tracked in the future. Then specify the dependency for your application in slug.json.

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

For example, suppose you wanted to add the coffee-script dependency. Just use npm to install the dependency and save it to your package.json file:

例如，假设您想要添加咖啡脚本依赖项。只需使用npm来安装依赖项并将其保存到您的包中。json文件:

1. npm --save install coffee-script
2. Manually edit the slug.json file. Add "coffee-script" to "dependencies".

Suppose you wanted to include your own module 'bloomfilters' and it wasn't in the npm registry. You could add it to your project in the following way:

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

1. npm --save install https://github.com/dsummersl/bloomfilters/tarball/master
2. Manually edit the slug.json file. Add "bloomfilters" to "dependencies".

Local modules

If you want to include your own coffee or javascript you can do so by adding those files to the app/ folder. Note that in order to expose your script via the 'require' method you must make it a CommonJS module. It is very simple - see the hem docs.

如果你想要包含你自己的咖啡或javascript，你可以将这些文件添加到app/文件夹中。注意，为了通过“require”方法公开脚本，必须将其设置为一个CommonJS模块。这很简单——看看哼哼医生。

Local files

If you want to include non-CommonJS non 'require' code you can also stitch that by referencing your custom javascript or coffeescript via the 'libs' list in slug.json.

如果您想包含非commonjs non 'require'代码，您还可以通过在slu.json中的“libs”列表中引用自定义javascript或coffeescript来进行缝合。

CSS

Hem will stitch together your CSS too, if you want. See the hem docs.

如果你想的话，哼哼也会把你的CSS连起来。看到哼哼文档。

Building

Once you have your dependencies listed, you can use hem to stitch them all together.

一旦列出了依赖项，就可以使用褶来将它们组合在一起。

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

Notes

Hem was meant for the spinejs project - but you don't have to use it for that. Ignore any docs mentioning spine as you wish...

哼哼本来是为spinejs项目设计的，但你不必为此而使用它。忽略任何提到脊柱的医生……

#4

Well, I'm surprised that no one mentionned Browserify yet.

嗯，我很惊讶没有人提到棕色皮肤。

1. supports package.json format
2. 支持包。json格式
3. uses npm underneath which can use a github (or any git) repo as package source
4. 下面使用npm，它可以使用github(或任何git) repo作为包源
5. minifies and concatenates all dependencies into a single file.
6. 将所有依赖项缩小并连接到一个文件中。
7. supports coffeescript if you include it in your dependencies
8. 如果在依赖项中包含coffeescript，则支持它
9. require style all the way.
10. 一直需要风格。
11. supports source maps
12. 支持来源地图

#5

I'm pretty sure Hem meet your requirements (I use a personnal fork with additional compilers - jade and stylus - it's easy to customize to your needs). It uses npm to manage depedencies.

我很确定哼哼符合你的要求(我使用带有额外编译器的个人叉子——玉石和触控笔——很容易根据你的需要定制)。它使用npm来管理派驻。

#6

You might want to take a look at Yeoman, which uses several techniques to help you with your requirements.

您可能想看看约曼，它使用了几种技术来帮助您满足您的需求。

Our workflow is comprised of three tools for improving your productivity and satisfaction when building a web app: yo (the scaffolding tool), grunt (the build tool) and bower (for package management).

在构建web应用程序时，我们的工作流由三个工具组成:yo(搭建工具)、grunt(构建工具)和bower(用于包管理)。

Build-in support for CoffeeScript, Compass and more. Works with r.js (RequireJS), unittesting etc.

内置的对coffecript, Compass等的支持。与r。js(RequireJS),unittest等等。

As for your requirements:

至于你的要求:

1. Bower is used for dependency management
2. Bower用于依赖管理
3. Bower can work with local files, git://, http:// and more
4. Bower可以处理本地文件，git:/， http://等等
5. Build-in support for minification and concatenation (even for your images)
6. 内置支持缩小和连接(即使是您的图像)
7. Build-in support to automatically compile CoffeeScript & Compass (with LiveReload)
8. 内置支持自动编译CoffeeScript和Compass(与LiveReload)
9. As stated in the build process: if you're using AMD, I will pass those modules through r.js so you don't have to.
10. 如构建过程中所述:如果您正在使用AMD，我将通过r传递这些模块。不用了。

All features:

所有的特点:

Lightning-fast scaffolding — Easily scaffold new projects with customizable templates (e.g HTML5 Boilerplate, Twitter Bootstrap), RequireJS and more.

快速搭建——用可定制的模板轻松搭建新项目。g HTML5样板，推特引导)，RequireJS等等。

Great build process — Not only do you get minification and concatenation; I also optimize all your image files, HTML, compile your CoffeeScript and Compass files, if you're using AMD, I will pass those modules through r.js so you don't have to.

伟大的构建过程——不仅仅是缩小和连接;我也优化你所有的图像文件，HTML，编译你的CoffeeScript和Compass文件，如果你使用AMD，我将通过r传递这些模块。不用了。

Automatically compile CoffeeScript & Compass — Our LiveReload watch process automatically compiles source files and refreshes your browser whenever a change is made so you don't have to.

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

Automatically lint your scripts — All your scripts are automatically run against JSHint to ensure they're following language best-practices.

自动排列你的脚本——你所有的脚本都自动运行在JSHint上，以确保它们遵循语言最佳实践。

Built-in preview server — No more having to fire up your own HTTP Server. My built-in one can be fired with just one command.

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

Awesome Image Optimization — I optimize all your images using OptiPNG and JPEGTran so your users can spend less time downloading assets and more time using your app.

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

Killer package management — Need a dependency? It's just a keystroke away. I allow you to easily search for new packages via the command-line (e.g. `bower search jquery), install them and keep them updated without needing to open your browser.

杀手包管理——需要依赖吗?只需轻轻一击。我允许您通过命令行(例如)轻松地搜索新的包。“bower search jquery”)，安装并更新它们，无需打开浏览器。

PhantomJS Unit Testing — Easily run your unit tests in headless WebKit via PhantomJS. When you create a new application, I also include some test scaffolding for your app.

PhantomJS单元测试——可以轻松地在headless WebKit中通过PhantomJS运行单元测试。当您创建一个新的应用程序时，我还为您的应用程序提供了一些测试框架。

#7

Bower may suits your needs (1) and (2) for the rest you have requirejs. From the readme :

鲍尔可能适合你的需要(1)和(2)其余你有要求。的自述:

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.

To install a package:

安装包:

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

#8

Look at Jam package manager. Following is the description from its homepage

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

For front-end developers who crave maintainable assets, Jam is a package manager for JavaScript. Unlike other repositories, we put the browser first.

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

It seems a lot similar to npm in how it works.

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

Install package like below

安装包就像下面

jam install backbone

keeping packages up to date by executing

通过执行使包保持最新

jam upgrade
jam upgrade {package} 

Optimize packages for production

优化生产包

jam compile compiled.min.js

Jam dependencies can be added in package.json file.

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

For complete documentation read Jam Documentation

对于完整的文档，请阅读Jam文档。

#9

I just came across inject.js

我刚遇到印第安人

Some of the features, from the project site:

一些功能，从项目网站:

Inject (Apache Software License 2.0) is a revolutionary way to manage your dependencies in a Library Agnostic way. Some of its major features include:

注入(Apache Software License 2.0)是一种革命性的方法，可以以一种不可知的方式管理您的依赖关系。它的一些主要特点包括:

• CommonJS Compliance in the Browser (exports.*)
• 浏览器中的CommonJS遵从性(export .*)
• View the full CommonJS Support Matrix
• 查看完整的CommonJS支持矩阵
• Cross domain retrieval of files (via easyXDM)
• 文件的跨域检索(通过easyXDM)
• localStorage (load a module once)
• localStorage(加载模块一次)

#10

There are a couple of options:

有几个选择:

• http://browserify.org/ which allows you to import modules
• 允许您导入模块的http://browserify.org/
• RequireJS addresses the same problem
• RequireJS也解决同样的问题
• One that seems to be in active development is JoinJS
• 一个似乎正在积极开发的是JoinJS

Component might also be of interest, it does not manage dependencies per se but allows you to use chopped up versions of otherwise large libraries.

组件可能也有兴趣，它不管理依赖项本身，但是允许您使用其他大型库的删减版本。

#11

I use hem with npm, and I wanted to add some additional benefits that I think weren't covered so far.

我使用哼哼和npm，我想添加一些我认为还没有覆盖到的额外好处。

• Hem has a self-contained web server (strata) so you can develop your code without even needing to recompile. I never use hem build unless I am publishing an app.
• 哼哼拥有一个自包含的web服务器(strata)，因此您甚至无需重新编译就可以开发代码。除非我发布应用程序，否则我从不使用哼哼构建。
• You don't need to use Spine.js to use hem, you can use it to compile arbitrary coffeescript packages if you set up slug.json correctly. Here's one of my packages that is auto-compiled with cakefile: https://github.com/HarvardEconCS/TurkServer/tree/master/turkserver-js-client
• 你不需要使用脊柱。要使用哼哼，您可以使用它来编译任意的coffeescript包，如果您设置了slug的话。json正确。下面是我使用cakefile自动编译的一个包:https://github.com/HarvardEconCS/TurkServer/tree/master/turkserver-js-client
• Speaking of the above, hem allows you to link other dependencies on your local system in with npm link and combines them seamlessly even when you are using the strata server. In fact, you needn't even use the cake method above, you can just link directly to coffeescript from dependent projects.
• 说到上面，hem允许您将本地系统上的其他依赖项与npm链接联系起来，并且即使在您使用strata服务器时也无缝地结合它们。事实上，您甚至不需要使用上面的cake方法，您可以直接链接到依赖项目的coffeescript。
• Hem supports eco (embedded Coffeescript) for views and Stylus for CSS, and compiles all that, along with your Coffeescript, into one JS and one CSS file.
• 哼哼支持用于视图的eco(嵌入式Coffeescript)和用于CSS的手写笔，并将所有这些与coffecript一起编译成一个JS和一个CSS文件。

Here's a basic list for getting set up with a Spine, hem, coffeescript app. Feel free to ignore the Spine parts. In fact, sometimes I use spine app to set up a directory structure for a non-Spine app, then edit slug.json to change to a different compilation structure.

这里有一个基本的列表，你可以设置一个脊柱，下摆，咖啡稿应用。事实上，有时我使用脊柱应用为非脊柱应用建立一个目录结构，然后编辑鼻涕虫。将json更改为不同的编译结构。

1. Install NPM: curl http://npmjs.org/install.sh | sh on a *nix system. I'll assume it's available from the command line.
2. 安装NPM: curl http://npmjs.org/install.sh | sh在*nix系统上。我假设它在命令行中可用。
3. Install hem globally (npm install -g hem). Development has branched as of late so you might want to get it straight out of github (https://github.com/spine/hem), checkout a branch, and npm install -g . in that folder.
4. 全局安装哼哼(npm安装—g哼哼)。开发已经扩展到最近，所以您可能希望直接从github (https://github.com/spine/hem)、签出一个分支和npm install -g中获得它。在那个文件夹。
5. npm install -g spine.app will make spine available as a global command
6. npm安装- g的脊柱。应用程序将使脊柱作为一个全局命令可用
7. spine app folder will make a Spine project called app in folder, generating the right directory structure and a bunch of skeleton files to get started.
8. 脊柱应用程序文件夹将创建一个脊柱项目，称为应用在文件夹，生成正确的目录结构和一堆骨架文件开始。
9. cd to folder and edit dependencies.json for the libraries you need. Add them to slug.json so that hem knows where to find them as well.
10. cd到文件夹并编辑依赖项。json用于需要的库。将它们添加到蛞蝓。json使哼哼知道在哪里也能找到它们。
11. Optional: npm link any of your local packages in development to node_modules, and you can add them to slug.json for hem (either an index.js to include directly or an index.coffee if you want hem to compile it.)
12. 可选:npm将开发中的任何本地包链接到node_modules，您可以将它们添加到slug中。哼哼的json(或索引)。直接包含或包含索引。如果你想让哼哼来编译咖啡的话。
13. npm install . to download all the dependencies you just entered in.
14. npm安装。要下载您刚刚输入的所有依赖项。

15. If you take a look at the default spine config, there is a app/lib/setup.coffee where you require all the libraries you need from your dependencies. Examples:

    如果您看一下默认的脊柱配置，有一个应用/lib/setup。您需要从依赖项中获得所需的所有库的咖啡。例子:

    # 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'
    

16. In index.coffee, you just require lib/setup and load the main controller for your app. In addition, you need to require any other classes in those other controllers. You can use spine controller something or spine model something to generate templates for controllers and models. Typical Spine controller looks like the following, using node's require:

    在索引。coffee，你只需要lib/setup并为你的应用加载主控制器。另外，你需要在其他控制器中添加任何类。您可以使用脊柱控制器或脊柱模型来为控制器和模型生成模板。典型的脊柱控制器看起来像以下，使用节点的要求:

    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
    

17. The default generated index.html will usually be fine for loading your app, but modify as necessary. Per your requirements, it only pulls in one js and one css file, which you never need to modify.

    默认生成的索引。html通常可以很好地加载应用程序，但是需要时可以进行修改。根据您的要求，它只包含一个js和一个css文件，您永远不需要修改它。

18. Edit your stylus files as necessary in the css folder. It's a lot more flexible than CSS :)
19. 在css文件夹中根据需要编辑手写笔文件。它比CSS灵活多了)
20. From folder, run hem server to start a hem server, and navigate to localhost:9294 to see your app. (If you installed hem globally.) It has some hidden arguments, for example --host 0.0.0.0 listens on all ports.
21. 从文件夹中，运行哼哼服务器以启动哼哼服务器，导航到localhost:9294以查看您的应用程序(如果您全局安装了哼哼)。它有一些隐藏的参数，例如，主机0.0.0.0监听所有端口。
22. Build the rest of your app using proper MVC techniques, and use stylus for CSS and eco for views. Or don't use Spine at all, and hem will still work great with Coffeescript and npm. There are many examples of projects using both models.
23. 使用适当的MVC技术构建应用程序的其余部分，使用手写笔进行CSS处理，使用eco进行视图处理。或者根本不用书脊，哼哼在写咖啡稿和npm的时候仍然很出色。有许多项目使用这两个模型。

One more thing: normally, hem server will update automatically as you update your code and save files, which makes it a cinch to debug. Running hem build will compile your app into two files, application.js, which is minified and application.css. If you run hem server after this, it will use those files and no longer update automatically. So don't hem build until you actually need a minified version of your app for deployment.

还有一件事:通常，当你更新你的代码并保存文件时，哼哼服务器会自动更新，这使它成为一个调试的小工具。运行hem build将把你的应用程序编译成两个文件，应用程序。它是缩小和application.css。如果在此之后运行哼哼服务器，它将使用这些文件，不再自动更新。所以，在你真正需要应用程序的缩小版进行部署之前，不要限制构建。

Additional references: Spine.js & hem getting started

额外的引用:脊柱。开始了

#12

Here's a solution that takes a very different approach: package up all the modules into a JSON object and require modules by reading and executing the file content without additional requests.

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

Pure clientside demo implementation: http://strd6.github.io/editor/

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

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

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

STRd6/require depends on having a JSON package available at runtime. The require function is generated for that package. The package contains all the files your app could require. No further http requests are made because the package bundles all dependencies. This is as close as one can get to the Node.js style require on the client.

STRd6/require取决于JSON包在运行时是否可用。为该包生成require函数。这个包包含应用程序需要的所有文件。不再发出http请求，因为包将所有依赖项捆绑在一起。这是离节点尽可能近的距离。js风格要求客户端。

The structure of the package is as follows:

包装结构如下:

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

Unlike Node a package doesn't know it's external name. It is up to the pacakge including the dependency to name it. This provides complete encapsulation.

与节点不同，包不知道它的外部名称。它取决于pacakge，包括命名依赖项。这提供了完整的封装。

Given all that setup here's a function that loads a file from within a package:

考虑到所有这些设置，这里有一个从包中加载文件的函数:

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

This external context provides some variable that modules have access to.

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

A require function is exposed to modules so they may require other modules.

require函数公开给模块，因此它们可能需要其他模块。

Additional properties such as a reference to the global object and some metadata are also exposed.

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

Finally we execute the program within the module and given context.

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

This answer will be most helpful to those who wish to have a synchronous node.js style require statement in the browser and are not interested in remote script loading solutions.

对于那些希望拥有同步节点的人来说，这个答案最有帮助。js风格需要浏览器中的语句，对远程脚本加载解决方案不感兴趣。

#13

Check out cartero if you using node/express on the backend.

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

#14

I'd suggest to check out the dojo toolkit which seems to meet most of your requirements. The one I'm not sure about is CoffeeScript.

我建议您看看dojo工具箱，它似乎满足了您的大部分需求。我不确定的是CoffeeScript。

dojo works with modules written in the Asynchronous Module Definition (AMD) format. It has a build system with packages and you can aggregate them in one or several files (called layers). Apparently it accepts git type repositories, more details on the build system here:

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

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

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

For the record, v1.9 beta is expected next month.

根据记录，v1.9 beta版预计将在下个月发布。

#15

Another framework that satisfies all my criterion released recently: http://duojs.org/ (and also supports treating other resources like CSS as dependencies).

另一个框架满足了我最近发布的所有标准:http://duojs.org/(也支持将其他资源(如CSS)作为依赖性)。

#16

dependency injection with asynchronous loading + browserify will be another good choice, compares to requirejs

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

asynchronous-frontend-dependency-management-without-AMD

asynchronous-frontend-dependency-management-without-AMD