Babel and Browserify / Webpack confusion

Question

Quick question. I am a bit confused about ES2015(ES6).

Let's say I use Babel to compile to ES6 Javascript to compliant ES5 for current browsers.

The import/export functions are already available in ES6 by using Babel. So why would I need something like Browserify or Webpack if I were to simply use these just to bundle my modules, when ES6 could do it for me?

Everywhere I go I see people using Babel in combination with Browserify or Webpack. Although I know something like Webpack can be used for more, but I wonder if it is also possible to bundle files using the ES6 syntax.

I might be totally in the wrong here and I might have gotten lost in the Javascript Jungle of 2016, so I hope someone can clarifty this for me.

Edit

Am I right to assume that the native ES6 import / export functionality simply does not bundle files? From what I have read so far I think you still need to include all the separate Javascript files but you simply import modules into each-others namespace by using the native import functionality?

Answer 1

Yes, using babel to transpile your ES6 imports into ES5 will work.

However, one advantage of using webpack is that creates one static file to be served up in your production environment.

Answer 2

Pre-ES6 has no native module system, so there are multiple systems constructed in userland code (e.g. CommonJS / Node modules and AMD). Those are what Babel converts ES6 module syntax to (and yes, you're correct that ES6 module syntax has no native bundling story anyway). Browsers have no knowledge of those userland APIs. Node implements its module system by wrapping a "module" in a function that injects require() etc. In a browser require() would just be a reference error. Browserify (or another bundler) makes it work in the browser, and bundles a whole dependency graph into a single script. So if the code is for the browser you're likely going to want to bundle it. If it's for Node you may not need to.

The import/export functions

Not functions, declarations.

if I were to simply use these just to bundle my modules, when ES6 could do it for me?

I wonder if it is also possible to bundle files using the ES6 syntax.

Am I right to assume that the native ES6 import / export functionality simply does not bundle files?

Yes. There's no native way to bundle ES6 modules. You can transpile ES6 module syntax to something like Node modules and bundle those.

From what I have read so far I think you still need to include all the separate Javascript files but you simply import modules into each-others namespace by using the native import functionality?

It's important to realize that while the syntax is standardized, a lot of the behavior isn't. There's a Loader spec under development to specify how modules will actually be located and loaded.

See also https://stackoverflow.com/a/33044085/1034448.