Do es6 modules negate the need for browserify/webpack?

Question

ES6 modules allow us to create modules of code that can be exported and imported as dependencies.

Browserify and Webpack do the same thing. So am I right in assuming that if I use ES6 along with something like babel to transpile my code then webpack and browserify are not needed?

Answer 1

If you use it in the browser, you currently still need webpack or browserify.

Let's have a look at an example:

The following

import * as name from 'name.js';

is turned into:

'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

As you see, babel relies on the CommonJS Method require (really any implementation of it) to do the import. As node.js implements CommonJS, it would work, but no browser currently implements it. AFAIK there aren't any browsers that support ES 6 Modules natively either.