包装AngularJs应用程序

我正在建设Angular Apps，使用1.x并且已经有一段时间了。我使用Bower来安装Angular以及与之相关的各种软件包以及Shivs，JQuery，ChartJs等其他一些软件。我喜欢使用Bower，因为它非常快速，并且保持所有内容都在一致的位置供我参考。我使用Grunt以及我的任务管理器，所以我也希望能够自动化这个过程以实现顺利的开发。包装AngularJs应用程序

现在随着我的Angular知识的增加，以及我构建的应用程序的规模不断增加，我发现自己在index.html中包含数十个对文件的调用，我真的很想整理所有这些，理想情况下放到一个不错的app.js中，使其更加易于管理，不仅适用于我自己，而且适用于任何进入和使用这些应用程序的人。

我见过像requirejs，browserify和commonjs这样的maaany工具，但它们都提供了我以后的功能，但是当阅读各种教程或关于这个过程的会议谈话时，彼此冲突，哪一个最好。我知道在某种程度上（就像所有这些竞争技术一样），这是个人喜好，而我倾向于浏览，但显然这会从流程中移除凉亭并使用NPM。如果可能的话，我想坚持鲍尔。我非常喜欢使用它。

有没有人有任何建议或最佳做法，他们可以提供这可能为我清除这件事？咕噜咕噜/咕嘟咕嘟的简单连接就是要走的路吗？

任何有用的意见/答案将不胜感激。

非常感谢。

来源

2016-06-07 Dan Hodson

的问题是过于宽泛，也不会持续很长时间。无论如何，我会亲自推荐Webpack + bower-webpack-plugin（+ Gulp/Grunt）包。 Webpack足够灵活，可以在不利条件下处理Bower和NPM依赖关系。花费一些时间来设置正确的方式，但这是一项稳健的投资。我会考虑concat一个穷人的捆绑系统，这是任何中型到大型项目的一脚。 – estus

这确实是一个冗长的方式，要求图书馆推荐，这是脱离主题。请参阅http://stackoverflow.com/help/on-topic，＃4。你做了一些尝试来描述这个问题，但实际上只是提到一系列不同的库。对其他库的建议甚至是使用相同库的新方法仍然不同于解决代码问题。 – Claies

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

由于您已正确识别RequireJS和commonjs围绕不同（有点冲突）的目标演变而且不兼容。 ES6模块是一个standardized模块化JavaScript的工作，已经得到了转发器的充分支持（如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

来源

2016-06-07 18:02:44 lorefnon

非常感谢@lorefnon。一个非常好的答案。我以前没有遇到过Webpack，所以这对你的解释也很理想。 –

包装AngularJs应用程序

回答

相关问题