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

Posted 2023-02-22

【中文标题】模块化 angularjs 应用程序 commonJS 与 AMD 模块语法

【英文标题】：modular angularjs application commonJS vs AMD module syntax

【发布时间】：2015-09-07 06:56:36

【问题描述】：

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

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

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

谢谢。

【问题讨论】：

when you're concatenating all the modules in a single js file 然后没有。你是对的，不需要AMD，实际上没有任何意义。另请阅读requirejs.org/docs/commonjs.html

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

就像 vinyakj 写的那样，如果连接到一个文件，则不需要 AMD。但是，如果您需要一些延迟加载的代码，您可以查看angular-require-lazy 以获得一些想法。

【参考方案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 我描述了一个人是如何实现它的。享受吧！