Question

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

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

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

感谢。

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 我描述了如何才能实现它。享受！

模块angularjs应用程序commonJS vs AMD模块语法

1 个答案: