AngularJS RequireJS Browserify和JavaScript模块/全球范围内的噩梦 [英] AngularJS RequireJS Browserify and the Javascript module/global scope nightmare

问题描述

我一直在这一切的CommonJS的VS AMD最近的战斗挖了一下，这是我的发现...
（顺便说一句，我不是在这里preaching我分享我的想法得到了一些建设性的见解......）
该RequireJS带来的复杂性，以我的角模块，它觉得我错了，因为它是一个模块一个模块包...
该Browserify方式是清洁，但它与每一件事情正常工作，你需要把所有的依赖和你的依赖，依赖正确实施，不幸的是，我们不是生活在一个完美的世界......所以你必须要垫片和垫片被匀利布斯内依赖......我不是额外的复杂性的大风扇...

I have been digging a bit lately in all this CommonJS vs AMD battle and this is my findings... ( BTW I am not preaching here I am sharing my thoughts to get some constructive insights... ) The RequireJS brings to much complexity to my Angular modules, it feel wrong to me as it's a module wrap in a module... The Browserify way is cleaner but for it to work correctly with every thing, you need to have all your dependency and your dependency-dependencies implemented correctly and unfortunately we don't live in a perfect world... so you have to shim and shim the inner dependency of the shimmed Libs... I am not a big fan of extra complexity...

目前我打算去的方式（并受的所有建设性的批评...）

The way I am currently going for ( and subject to all your constructive criticism... )

我有一个咕噜文件串联，然后再缩小我所有的资源，如BreezeJS，$，Q，Ladda，等等...在全球范围内泄漏库...
然后，我声明这种类型的模块，这些全局：

I have a grunt file concatenating and minify all my resources, the libs like BreezeJS, $, Q, Ladda, etc... leaks on the global scope... Then I declare this type module for these globals:

module.value('gLadda', (function(){

    if("Ladda" in window && "Spinner" in window){
        return Ladda;
    }else{
        throw new Error("The Globals Ladda || Spinner are missing");
    }

})());

在我的应用程序我用Angularify依赖工作，我没有用在团队这个技术，我如果这是发射一些红色灯为一些人怀疑，如果他们可以解释为什么...谢谢你的时间。

After in my app I work with the "Angularify" dependencies, I haven't used this technique in a team and I am wondering if this is firing some red lights for some, and if they would explain why... Thank you for your time.

推荐答案

从功能请求我有包容的AMD的装载机中作为附加纳克模块的一部分。

From a feature request I have for inclusion of an AMD loader as part of the additional ng-modules.

角带有一个功能，允许用户创建模块定义和查找实体，如后来被一个字符串标识符控制器。角不来加载存储在一个单独的文件脚本的能力，这意味着你留下了四个选项：

Angular comes with a feature that allows users to create Module definitions and look up entities such as controllers later by a String Identifier. Angular does not come with the ability to load scripts stored in a separate file which means that you are left with four options:

1. 存储所有在一个文件中的JavaScript。


2. 分离你的JavaScript到单独的文件，并添加脚本标记为每个文件。


3. 使用AMD的文件管理器，例如 requireJS 管理脚本文件和它们的依赖。


4. 使用一个precompiler如 browserify 以风格的NodeJS文件合并成一个单一的脚本文件。

1. Store all your javascript in a single file.
2. Separate your javascript into separate files and add script tags for each file.
3. Use an AMD file loader like requireJS to manage script files and their dependencies.
4. Use a precompiler like browserify to merge nodejs style files into a single script file.

作为一个项目的发展，这些文件变得更加难以管理，而不是因为它们的大小只，但由于模块之间的依赖变得更加复杂。大项目也可以受益于AMD装载机的延迟加载。

As a project grows, the files become more difficult to manage, not just because of their size, but because the dependencies between modules become more complicated. Large projects can also benefit from the lazy loading of an AMD loader.

这是AMD模块加载列出了需present这个文件才能运行的依赖关系。问题是，AMD的依赖关系是接近于由角但不完全一样的东西用的注射列表。一个问题可以在此code可以看出：

An AMD module loader lists the dependencies that need to be present before this file can be run. The problem is that AMD dependencies are close to the Injection list used by Angular but not exactly the same thing. One problem can be seen in this code:

define(['angular'], function(angular) {
  return angular.module('myApp.controllers', ['myApp.services'])
    .controller('MyController', ['$scope', 'myService',
      function($scope, myService) {
        $scope.data = myService.getData();
      }
    ])
};

在上面的定义声明说，确保角运行此功能之前进行初始化。在 angular.module 声明说来查找'$范围'和'为myService，并将其注入到变量 $范围和为myService 。问题是，AMD的装载机可能没有初始化定义 myApp.services ，您可以在其中presume定义文件为myService ，因为它没有出现在定义上述声明。这将创建注入名单和AMD依赖列表之间存在巨大脱节。它不仅是告诉困难的，如果'myApp.services;已经被加载，也很难说什么特定成分都'myApp.services'可用。 IOW是为myService'都装和注射？

The define statement at the top says to make sure that angular is initialized before running this function. The angular.module statement says to lookup '$scope' and 'myService' and inject them into the variables $scope and myService. The problem is that the AMD loader might not have initialized the file that defines myApp.services, in which you can presume is defined myService, because it did not appear in the define statement above. This creates a huge disconnect between the injection list and AMD dependency list. Not only is it difficult to tell if 'myApp.services; has been loaded, it is also difficult to tell what particular components are available in 'myApp.services'. IOW Is 'myService' both loaded and injectable?

我目前使用的选项＃3 requirejs的形式，因为我需要通过路由动态加载控制器（参见第一个链接）的能力。此外，应用程序的大小，我与现在的工作让browserfy不切实际，因为有这么多页。我这样做，不过，一致认为这是次优的，但我没有看到任何其他选择的时刻。结果
从实用的角度来看，我每个文件定义一个注射。我也尽量让所有注射阵列需要阵列相匹配。这不是必要的，但它使code更容易维护。

I currently use option #3 in the form of requirejs because I need to have the ability to dynamically load controllers via routing (See the first link). Also, the application's size I am working with now makes browserfy impractical since there a so many pages. I do, however, agree that this is sub-optimal but I don't see any other choice at the moment.
From a practical standpoint, I define one injectable per file. I also try to make all injectable arrays match the require array. This isn't necessary but it makes the code more maintainable.

我发现这些文章很有帮助在写这篇：

I found these articles helpful in writing this:

https://github.com/marcoslin/angularAMD

<一个href=\"http://weblogs.asp.net/dwahlin/archive/2013/05/22/dynamically-loading-controllers-and-views-with-angularjs-and-requirejs.aspx\" rel=\"nofollow\">http://weblogs.asp.net/dwahlin/archive/2013/05/22/dynamically-loading-controllers-and-views-with-angularjs-and-requirejs.aspx

这篇关于AngularJS RequireJS Browserify和JavaScript模块/全球范围内的噩梦的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！