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

Question

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

• 选项 1

使用bundle.require将所有与角度相关的库（如角度、角度动画、角度用户界面路由器等）捆绑到vendor.js中

使用bundle.external将所有应用程序生成的源文件捆绑到app.js

这在开发环境中运行良好，app.js 可能需要 vendor.js 中的所有模块

但它在 prod 环境中崩溃了。缩小的角度文件并不都是 CMD。虽然我可以browserify-shim angular.min.js 和bundle.require angular-ui-router.min.js，但逐个文件处理这个文件有点麻烦。

• 选项 2

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

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

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 引用为浏览器代码中的全局变量的缺点。

例如

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

更新：

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