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

Let's say I use Babel to pile to ES6 Javascript to pliant 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 bination 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?

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

Let's say I use Babel to pile to ES6 Javascript to pliant 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 bination 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?

• javascript
• ecmascript-6

Share Improve this question Follow edited Oct 7, 2016 at 15:06 Stephan-v asked Oct 7, 2016 at 14:35 Stephan-vStephan-v 20.4k3232 gold badges123123 silver badges211211 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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.

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./a/33044085/1034448.