包装AngularJs应用程序

时间:2016-06-07 15:30:13

标签: javascript angularjs npm bower browserify

我正在使用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会成为一条路吗?

非常感谢任何有用的评论/答案。

非常感谢。

1 个答案:

答案 0 :(得分:5)

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

正确识别RequireJScommonjs围绕不同(且略有冲突)的目标并且不相容。 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