模塊化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模塊語法

回答

相關問題