模块化的AngularJS应用程序：CommonJS与AMD模块语法

Question

如果这个问题已经得到了回答，我提前道歉，但我并没有找到相关的内容。 我正在重构一个相当大的AngularJS应用程序，我正在创建AMD模块形式的组件。构建过程（grunt）使用requirejs插件加载所有模块并将它们连接成一个单独的js文件，包括像jQuery这样的某些库。

现在，我看了看CommonJS语法，它看起来更加简洁，我想知道是否值得使用CommonJS模块而不是AMD。我看到构建过程不会有太大的差异，基本上我只需要用browserify替换requireJS。

在像我的工作流程中使用AMD模块比CommonJS模块有什么优势？当您将所有模块连接成一个单独的js文件时，异步模块加载仍然可以被视为运行时的优势吗？

谢谢。

- gabric

---

当您将所有模块连接到单个JS文件中时，那么不需要AMD，实际上没有任何意义。还请阅读http://requirejs.org/docs/commonjs.html。 - vinayakj

你应该考虑的另一个选项是Webpack，它支持AMD、CommonJS和ES6模块系统。 - Davin Tryon

就像vinyakj所写的，如果将所有内容连接到一个文件中，则不需要使用AMD。但是，如果你想用一些懒加载的代码，可以看一下angular-require-lazy获取一些灵感。 - Nikos Paraskevopoulos

Answer 1

现在我建议您研究ES2015模块，作为JavaScript的本地模块系统。它既具有像CommonJS一样简单的语法，又具有像AMD一样异步加载模块的功能。

// my-module.js
export const foo = "foo";
export function bar() { return "bar"; };

...

// main.js
import { foo, bar } from "./my-module.js";
console.log( foo, bar() );

目前原生支持它的只有Chrome 60+，但您可以通过Webpack或SystemJS使其在任何浏览器中工作。我个人非常注重渐进增强，并且热衷于通过“第一批字节”提供核心用户体验。在这方面，我最喜欢的是能够将编译同步和异步加载模块的两种方法结合在一个应用程序中以获得最佳性能（使用Webpack）。因此，您可以决定哪些模块编译为单个文件，哪些模块按需加载（只要您控制它们如何加载即可）。

Promise.all([
 import("./module-foo" ),
 import("./module-bar" ),
 import("./module-baz" )
]).then( moduleExports => {
  console.log( moduleExports );
}).catch(( e )=> {
  console.error( e );
});

在这篇博客文章中https://medium.com/@sheiko/state-of-javascript-modules-2017-6548fc8af54a，我描述了如何准确地实现它。享受吧！

- Dmitry Sheiko