browserify如何使用基于角度的应用程序？

Question

我在这里乱了好几天。我试图让browserfiy与基于角度的应用程序一起工作。我尝试了以下选项，但仍然无法决定更好的方法，如果有人可以对此提出任何建议，我们将不胜感激。

• 选项1

使用vendor.js

将所有角度相关的lib（例如angular，angular-animate，angular-ui-router等）捆绑到bundle.require中

使用app.js

将所有应用程序源文件捆绑到bundle.external

在开发环境中工作正常，可以从app.js

中获取vendor.js中的所有模块

但它在生产环境中崩溃了。缩小的角度文件不是所有CMD。虽然我可以browserify-shim angular.min.js和bundle.require angular-ui-router.min.js，但它可以通过文件来执行此文件。

• 选项2

将所有有角度的库保留为<script>，并仅输出应用程序文件的包。这意味着在app.js中，我必须将angular称为全局var，这是不好的。

那么这样做的最佳做法是什么？

Answer 1

即使你执行require() angularjs，它仍会在其环境的上下文中公开angular命名空间（浏览器的Window对象）。我通常做的只是将所有angularjs模块依赖项（例如ui.router，ngResource等）放在angularjs应用程序所在的捆绑（浏览器化）javascript下面。在我的例子中，我使用gulp-useref来连接gulp-inject标签提供的所有脚本（这包括browserify捆绑的脚本）。

正如您在下面可能已经注意到的那样，bower组件（bower:js标签）被添加到包（inject:js标签）下方。由于要求angular模块会将angular对象附加到window对象中，因此browserify外部的任何组件都可以访问window.angular。

我提供的答案与选项2类似，但没有将angular作为浏览器化代码中的全局变量的缺点。

e.g。

<!-- build:js({./.tmp,./}) js/index.js -->
<!-- inject:js -->
<!-- endinject -->
<!-- bower:js -->
<!-- endinject -->
<!-- endbuild -->

更新：

我创建的github repo类似于上面提供的答案。尝试克隆它，看看你可以用它做什么。