包装AngularJs应用程序

Question

我正在使用1.x构建Angular Apps,并且已经有一段时间了.我使用Bower来安装Angular以及随之而来的各种软件包以及Shivs,JQuery,ChartJs等其他一些零件.我喜欢使用Bower因为它很好而且快速并且将所有内容保存在一致的地方供我参考.我使用Grunt以及我的任务运行器,所以我也希望能够自动化这个过程以实现丝滑顺利的开发.

现在随着我的Angular知识的增加以及我正在构建的应用程序的规模不断增加,我发现自己在index.html中包含了几十个文件调用,我真的想整理所有这些,理想情况下是不错的app.js让它更易于管理,不仅适合我自己,也适合其他任何进入这些应用程序的人.

我已经看到了诸如requirejs,browserify和commonjs之类的maaany工具,仅举几例,它们都提供了我所追求的功能,但是在阅读各种教程或观看会议上的会议时,它们似乎都与一个冲突另一个是最好的.我在某种程度上知道(与所有这些竞争技术一样)是个人偏好,我倾向于浏览器化,但显然这会从流程中移除bower并使用NPM.如果可能的话,我想坚持使用Bower.我真的很喜欢使用它.

有没有人有任何可以提供的建议或最佳实践可以为我解决这个问题？一个简单的concat与grunt/gulp只是要走的路吗？

任何有用的评论/答案将不胜感激.

非常感谢.

Answer 1

使用ES6模块和模块捆绑器(我的建议是Webpack).

正确地确定了RequireJS和commonjs围绕不同(并且略微冲突)的目标发展并且是不兼容的.ES6模块是模块化JavaScript 的标准化工作,已经被转换器(例如Babel)很好地支持.

本文对此新功能进行了精彩介绍:

尽管JavaScript从未有过内置模块,但社区已经融合了简单的模块风格,ES5及更早版本的库支持这些模块.这种风格也被ES6采用:

• 每个模块都是一段代码,一旦加载就会执行.
• 在该代码中,可能存在声明(变量声明,函数声明等).
  • 默认情况下,这些声明保留在模块的本地.
  • 您可以将其中一些标记为导出,然后其他模块可以导入它们.
• 模块可以从其他模块导入内容.它通过模块说明符引用那些模块,字符串是:
  • 相对路径('../model/user'):这些路径相对于导入模块的位置进行解释.通常可以省略文件扩展名.js.
  • 绝对路径('/ lib/js/helpers'):直接指向要导入的模块的文件.
  • 名称('util'):必须配置名称引用的模块.模块是单身人士.即使多次导入模块,也只存在一个模块的"实例".这种模块方法避免了全局变量,唯一全局的是模块说明符.

在实践中使用Javascript模块的示例:

//------ lib.js ------
export const sqrt = Math.sqrt;
export function square(x) {
    return x * x;
}
export function diag(x, y) {
    return sqrt(square(x) + square(y));
}

//------ main.js ------
import { square, diag } from 'lib';
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5