es6模塊否定了對browserify/webpack的需求嗎？

Question

ES6模塊允許我們創建可作爲依賴關係導出和導入的代碼模塊。

Browserify和Webpack做同樣的事情。所以我正確地假設，如果我使用ES6和類似babel的東西來傳遞我的代碼，那麼webpack和browserify是不需要的？

Answer 1

如果您在瀏覽器中使用它，您當前仍然需要webpack或browserify。

讓我們來看一個例子：

以下

import * as name from 'name.js'; 

變成：

'use strict'; 

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } } 

var _nameJs = require('name.js'); // Here, a function named "require" is still needed 

var name = _interopRequireWildcard(_nameJs); 

Check it out in the Babel Repl

正如你看到的，巴貝爾依賴CommonJS方法require（實際上它的任何實現）來執行導入。由於node.js實現了CommonJS，它可以工作，但目前沒有瀏覽器實現它。 AFAIK也沒有any browsers that support ES 6 Modules natively。

Answer 2

作爲闡述here - ES6模塊具有兩個方面：

的ES6模塊標準有兩個部分：

• 聲明的語法（用於導入和導出）
• 編程裝載機 API：配置模塊如何加載和有條件地加載 模塊

巴別處理只有第一個方面 - 即。用於導入和導出的聲明性語法，並且不提供它自己的加載器。

採用當今ES6模塊的人做的，通常是以下之一：

• 使用通天transpile ES6模塊語法到現有的模塊實現像CommonJS的/ AMD和適當的可用工具，如的WebPack/browserify/requirejs可以用來加載/捆綁js資產。
• 另外還有像SystemJS這樣的加載程序，它們提供了對Programmatic loader API的支持（通過ES6 module loader polyfill。使用這個工具可以讓你擺脫Browserify/Webpack，但是到目前爲止，你只是將一個工具換成另一個工具。隨着越來越多的庫，例如Aurelia懷抱ES6模塊，以及建議標準化System.import語法 - SystemJS將在普及飆升

另一個方面是與現有的模塊（尤其是對NPM）的生態系統的兼容性值得注意的是。您不會失去與現有生態系統兼容的策略：webpack和SystemJS都允許將commonjs加載並捆綁爲以及AMD模塊。

就資產捆綁而言，HTTP 2中的持續連接支持已經顯着降低了javascript文件連接的價值。雖然uglification的完整的JavaScript包後死代碼仍然是一個有價值的優化。

由於諸如Rollup之類的工具的作者一再指出，ES6模塊的靜態分析性質使樹形抖動和死代碼消除更爲有效。