需要模式Browserify/Angular

Question

我正在使用angular和browserify开展一个项目,这是我第一次将这两个工具结合使用,所以我想了解一下浏览器require文件的方法.

我们可能以不同的方式导入这些文件,到现在为止我用这种方式进行了实验:

角度应用:

app
  _follow
     - followController.js
     - followDirective.js
     - followService.js
     - require.js
- app.js

对于插件文件中的每个文件夹,我创建了一个require.js文件,在其中我需要该文件夹的所有文件.像这样:

var mnm = require('angular').module('mnm');

mnm.factory('FollowService', ['Restangular',require('./followService')]);
mnm.controller('FollowController',['$scope','FollowService',require('./followController')])
mnm.directive('mnmFollowers', ['FollowService',require('./followDirective')]);

然后要求所有require.js被调用的唯一文件中的文件app.js生成bundle.js

题:

这种方式要求文件可以是一个很好的结构,或者当我需要测试时会有一些问题吗？我希望看到你通过angular和browserify实现良好结构的方法

Answer 1

遗憾的是,AngularJS和browserify并不是一个很好的匹配.当然不喜欢React和browserify,但我离题了.

对我有用的是将每个文件作为AngularJS模块(因为每个文件已经是一个CommonJS模块)并让文件导出它们的AngularJS模块名称.

所以你的例子看起来像这样:

app/
  app.js
  follow/
    controllers.js
    directives.js
    services.js
    index.js

该app.js会是这个样子:

var angular = require('angular');
var app = angular.module('mnm', [
  require('./follow')
]);
// more code here
angular.bootstrap(document.body, ['mnm']);

该follow/index.js会是这个样子:

var angular = require('angular');
var app = angular.module('mnm.follow', [
  require('./controllers'),
  require('./directives'),
  require('./services')
]);
module.exports = app.name;

该follow/controllers.js会是这个样子:

var angular = require('angular');
var app = angular.module('mnm.follow.controllers', [
  require('./services'), // internal dependency
  'ui.router' // external dependency from earlier require or <script/>
  // more dependencies ...
]);
app.controller('FollowController', ['$scope', 'FollowService', function ...]);
// more code here
module.exports = app.name;

等等.

这种方法的优点是可以使您的依赖关系尽可能明确(即在CommonJS模块中实际需要它们),并且CommonJS模块路径和AngularJS模块名称之间的一对一映射可以防止令人讨厌的意外.

你们的做法最明显的问题是,你保持将被注入从期望他们的功能分开的实际依赖关系,因此,如果一个函数的依赖关系改变,你要接触的,而不是一个两个文件.这是代码气味(即坏事).

对于可测试性,任何一种方法都应该起作用,因为Angular的模块系统本质上是一个巨大的blob,导入两个定义相同名称的模块将相互覆盖.

编辑(两年后):其他一些人(在这里和其他地方)建议了替代方法,所以我应该解决它们以及权衡取舍:

1. 为您的整个应用程序提供一个全局AngularJS模块,并且只需要副作用(即,除了操纵全局角度对象之外,不要让子模块导出任何内容).

   这似乎是最常见的解决方案,但在面对模块时却有点苍蝇.这似乎是最务实的方法,但是如果你使用AngularJS,你已经在污染全局变量,所以我认为纯粹的基于副作用的模块是你的架构问题中最少的.

2. 在将AngularJS应用程序代码传递给Browserify 之前,将其连接起来.

   这是"让我们结合AngularJS和Browserify"的最直接的解决方案.这是一个有效的方法,如果你从传统的"只是一味地串连您的应用程序文件" AngularJS的位置和要添加Browserify第三方库开始,所以我想这使得它有效.

   至于你的应用程序结构,通过添加Browserify,这并没有真正改善任何事情.

3. 像1一样,但每个index.js定义自己的AngularJS子模块.

   这是Brian Ogden提出的样板方法.这个患有1所有缺点,但在AngularJS中创建的层次结构的一些外表至少你有一个以上的AngularJS模块和AngularJS模块名称实际上符合您的目录结构.

   但是主要的缺点是你现在有两套命名空间需要担心(你的实际模块和你的AngularJS模块)但没有强制它们之间的一致性.您不仅要记住导入正确的模块(这又是纯粹依赖于副作用),而且您还必须记住将它们添加到所有正确的列表中,并为每个新文件添加相同的样板.这使得重构非常笨拙,并且在我看来这是最糟糕的选择.

如果我今天必须选择,那么我会选择2,因为它放弃了AngularJS的所有伪装,并且Browserify能够统一,只留下两者做自己的事情.此外,如果您已经有一个AngularJS构建系统,它实际上只是意味着为Browserify添加额外的步骤.

如果您没有继承AngularJS代码库并想知道哪种方法最适合启动新项目:不要在AngularJS中启动新项目.选择支持开箱即用的真实模块系统的Angular2,或切换到没有遇到此问题的React或Ember.