我正在使用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会成为一条路吗?
非常感谢任何有用的评论/答案。
非常感谢。
答案 0 :(得分:5)
使用ES6模块和模块捆绑器(我的建议是Webpack)。
正确识别RequireJS和commonjs围绕不同(且略有冲突)的目标并且不相容。 ES6模块是模块化javascript的standardized努力,已经得到了转发器的良好支持(例如。Babel)。
This article为这项新功能提供了很好的介绍:
即使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