打包 AngularJs 个应用
Packaging AngularJs apps
我正在构建 Angular 应用程序，使用 1.x 并且已经有一段时间了。我使用 Bower 安装 Angular 和它附带的各种包以及其他一些零碎的东西，如 Shivs、JQuery、ChartJs 等。我喜欢使用 Bower，因为它既好又快，并且可以保存所有内容一个一致的地方供我参考。我使用 Grunt 以及我的 task-runner，所以我也希望能够自动执行此过程以实现丝般顺畅的开发。
现在，随着我的 Angular 知识的增加以及我正在构建的应用程序的规模不断扩大，我发现自己在 index.html 中包含了对文件的数十次调用，而且我真的很想整理所有这些，最好是整理成一个漂亮的 app.js 使它更易于管理，不仅是为了我自己，也是为了其他任何进入并使用这些应用程序的人。
我见过许多工具，例如 requirejs、browserify 和 commonjs 等等，它们都提供了我想要的功能，但是在阅读各种教程或观看有关该过程的会议演讲时，它们都似乎相互冲突，谁是最好的。我在某种程度上知道（与所有这些竞争技术一样）这是个人偏好，我倾向于 browserify，但显然这从流程中删除了 bower 并改为使用 NPM。如果可能的话，我想坚持使用 Bower。我真的很喜欢使用它。
有没有人可以提供任何建议或最佳实践来帮助我解决这个问题？使用 grunt/gulp 进行简单的连接是否可行？
任何有用的comments/answers将不胜感激。
非常感谢。
将 ES6 模块与模块捆绑器一起使用（我的建议是 Webpack）。
正如您正确识别的那样RequireJS and commonjs evolved around different (and slightly conflicting) goals and are incompatible. ES6 modules is a standardized effort towards modular javascript that is already well supported by transpilers (eg. Babel)。
This article 对这一新功能进行了很好的介绍：
Even though JavaScript never had built-in modules, the community has
converged on a simple style of modules, which is supported by
libraries in ES5 and earlier. This style has also been adopted by ES6:
- Each module is a piece of code that is executed once it is loaded.
- In
that code, there may be declarations (variable declarations, function
declarations, etc.).
- By default, these declarations stay local to the
module.
- You can mark some of them as exports, then other modules can
import them.
- A module can import things from other modules. It refers
to those modules via module specifiers, strings that are either:
- Relative paths ('../model/user'): these paths are interpreted
relatively to the location of the importing module. The file extension
.js can usually be omitted.
- Absolute paths ('/lib/js/helpers'): point
directly to the file of the module to be imported.
- Names ('util'):
What modules names refer to has to be configured. Modules are
singletons. Even if a module is imported multiple times, only a single
“instance” of it exists. This approach to modules avoids global
variables, the only things that are global are module specifiers.
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
我正在构建 Angular 应用程序，使用 1.x 并且已经有一段时间了。我使用 Bower 安装 Angular 和它附带的各种包以及其他一些零碎的东西，如 Shivs、JQuery、ChartJs 等。我喜欢使用 Bower，因为它既好又快，并且可以保存所有内容一个一致的地方供我参考。我使用 Grunt 以及我的 task-runner，所以我也希望能够自动执行此过程以实现丝般顺畅的开发。
现在，随着我的 Angular 知识的增加以及我正在构建的应用程序的规模不断扩大，我发现自己在 index.html 中包含了对文件的数十次调用，而且我真的很想整理所有这些，最好是整理成一个漂亮的 app.js 使它更易于管理，不仅是为了我自己，也是为了其他任何进入并使用这些应用程序的人。
我见过许多工具，例如 requirejs、browserify 和 commonjs 等等，它们都提供了我想要的功能，但是在阅读各种教程或观看有关该过程的会议演讲时，它们都似乎相互冲突，谁是最好的。我在某种程度上知道（与所有这些竞争技术一样）这是个人偏好，我倾向于 browserify，但显然这从流程中删除了 bower 并改为使用 NPM。如果可能的话，我想坚持使用 Bower。我真的很喜欢使用它。
有没有人可以提供任何建议或最佳实践来帮助我解决这个问题？使用 grunt/gulp 进行简单的连接是否可行？
任何有用的comments/answers将不胜感激。
非常感谢。
将 ES6 模块与模块捆绑器一起使用（我的建议是 Webpack）。
正如您正确识别的那样RequireJS and commonjs evolved around different (and slightly conflicting) goals and are incompatible. ES6 modules is a standardized effort towards modular javascript that is already well supported by transpilers (eg. Babel)。
This article 对这一新功能进行了很好的介绍：
Even though JavaScript never had built-in modules, the community has converged on a simple style of modules, which is supported by libraries in ES5 and earlier. This style has also been adopted by ES6:
- Each module is a piece of code that is executed once it is loaded.
- In that code, there may be declarations (variable declarations, function declarations, etc.).
- By default, these declarations stay local to the module.
- You can mark some of them as exports, then other modules can import them.
- A module can import things from other modules. It refers to those modules via module specifiers, strings that are either:
- Relative paths ('../model/user'): these paths are interpreted relatively to the location of the importing module. The file extension .js can usually be omitted.
- Absolute paths ('/lib/js/helpers'): point directly to the file of the module to be imported.
- Names ('util'): What modules names refer to has to be configured. Modules are singletons. Even if a module is imported multiple times, only a single “instance” of it exists. This approach to modules avoids global variables, the only things that are global are module specifiers.
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