关于javascript：模块angularjs应用程序commonJS vs AMD模块语法

modular angularjs application commonJS vs AMD module syntax

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

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

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

谢谢。

相关讨论

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

1
2
3

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

…

1
2
3

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

号

目前，Chrome60+只支持本机版本，但您可以让它在任何使用Webpack或SystemJS的浏览器中工作。我个人非常关心渐进式增强，并热衷于使用"第一字节"提供核心用户体验。在这方面，我最喜欢将两种方法(编译的同步模块和加载的异步模块)结合到一个应用程序中以获得最佳性能(使用Webpack)。因此，您可以决定在单个文件中编译哪些模块，以及按需加载哪些模块(前提是您可以控制它们的加载方式)。

1
2
3
4
5
6
7
8
9

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我描述了一个人是如何做到这一点的。享受！