Javascript 模块化angularjs应用程序commonJS与AMD模块语法

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

现在，我正在研究CommonJS语法，它看起来非常干净，我想知道使用CommonJS模块而不是AMD是否值得。我看到构建过程不会有太大的不同，基本上我只需要将requireJS与browserify交换

在像我这样的工作流中，使用AMD模块比使用commonJS模块有什么优势吗？当您将所有模块连接到一个js文件中时，异步模块加载在运行时是否仍然被视为一种优势

---

谢谢。

现在，我建议您将ES2015模块作为JavaScript中的本机模块系统进行研究。它既有CommonJS语法的简单性，也有AMD等异步加载模块

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

目前只有Chrome 60+支持它，但你可以在任何带有Webpack或SystemJS的浏览器中使用它。 我个人非常关心渐进式增强，并渴望通过“第一个字节”提供核心用户体验。在这方面，我最喜欢在一个应用程序中结合这两种方法（编译的同步模块和加载的异步模块）以获得最佳性能的能力（使用Webpack）。因此，您可以决定在单个文件中编译哪些模块，以及根据需要加载哪些模块（假设您可以控制它们的加载方式）

在这篇博文中

---

我描述了一个人是如何做到这一点的。享受吧

当您将所有模块连接到一个js文件中时，则不会。您是对的，不需要AMD，实际上没有任何意义。另外，您应该考虑的另一个选项是支持AMD、Cuffjs和ES6模块系统。如ViyaJJ编写的，如果连接到一个文件，则不需要AMD。然而，如果您想要一些延迟加载的代码，您可以看看一些想法。
// main.js
import { foo, bar } from "./my-module.js";
console.log( foo, bar() );

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