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

如果问题已经得到解答，我很抱歉，但我一直未能找到任何相关的东西。我正在重构一个相当大的AngularJS应用程序，我正在用AMD模块的形式创建组件。构建过程（grunt）使用requirejs插件来加载所有模块，并将它们连接成一个包含jQuery等库的js文件。模块化angularjs应用程序commonJS与AMD模块语法

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

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

谢谢。

来源

2015-06-21 gabric

'当你在单个js文件中连接所有的模块'然后没有。你是对的，不需要AMD，实际上没有任何意义。另请阅读http://requirejs.org/docs/commonjs.html – vinayakj

您应该考虑的另一个选项是支持AMD，CommonJS和ES6模块系统的[Webpack]（http://webpack.github.io/）。 –

像vinyakj写道，如果连接到一个文件，不需要AMD。但是如果你关心一些懒惰的代码，你可以看看[angular-require-lazy]（https://github.com/nikospara/angular-require-lazy）的一些想法。 –

现在我建议您在JavaScript中将ES2015模块作为本地模块系统进行研究。它有两个 - 像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 我描述了一个能究竟如何实现它。请享用！

来源

2017-08-14 09:05:58

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

回答

相关问题