簡單的JavaScript ES6與require（）導入

Question

我正准備通過babel使用ES6模塊導入/導出，但在本文中遇到了這個令人困惑的聲明。

它指出：

ES6的import和export與require()方法相結合，使我們可以自由地將所有客戶端代碼組織到模塊中，同時使用新版JavaScript的所有功能編寫代碼。

這使得它聽起來像ES6的系統和require()有兩個不同的目的，從而使這個babel/browserify方法成為最好的方法。 我的理解是他們都做了同樣的事情，只是有點不同。 有人可以幫忙解釋一下嗎？

Answer 1

這種說法是矛盾的。 如果你進入ES6 / ES7，你將不想使用CommonJS- style require ，但是你總是希望使用import異步加載模塊。

實際上，ES6 / ES7有一種編程方式導入模塊： System.import(...) ，但仍在討論加載器規范 ......

在獲得推薦狀態之前，有一個polyfill（並且超過這個......）： SystemJS 。

從現在開始，我會避免使用任何其他模塊加載語法，因為您的代碼在幾年內可以在標准Web瀏覽器中完美地執行，幾乎沒有任何修改。

OP在一些評論中問道......

當我們有ES6導入/導出模塊加載功能時，為什么js模塊需要來自ES6的System.import（...）？ 他們不是在執行相同的任務嗎？

import語句只能位於代碼文件的頂部 。 有時您根據執行某種邏輯知道要加載哪些文件， import語法不支持條件。

例如，假設你有一個需要插件的應用程序，有些選項有一個名為loadPlugins的標志，可以是true或false 。 因此，如果應用程序需要加載它們，您將需要加載它們：

if(options.loadPlugins) {
   Promise.all(
      options.plugins.map(plugin => System.import(plugin.path))
   ).then(() => {
      // Do stuff when all plugins have been already loaded!
   });
}