Simple JavaScript ES6 vs require() importing

Question

I'm getting ready to use ES6 module import/export via babel but came across this confusing statement in this article.

It states:

The power of ES6’s import and export combined with the require() method, gives us the freedom to organize all of the client-side code into modules and at the same time write the code using all the power of the new version of JavaScript.

This makes it sound like ES6's system and require() serve two different purposes, thereby making this babel/browserify approach the best one to take. My understanding was that they both do the same things, just a little differently. Could anyone help explain this?

Matías Fidemraizer · Accepted Answer · 2016-08-20 13:38:41Z

9

This statement is contradictory. If you got into ES6/ES7 you won't want to use CommonJS-style require, but you'll always want to load modules asynchronously using import.

In fact, ES6/ES7 have a programmatic way of importing modules: System.import(...), but the loader specification is still being discussed...

Until it gets recommendation status, there's a polyfill (and more than this...): SystemJS.

I would avoid any other module loading syntax from now, because your code will be perfectly executable in standard Web browsers in some years with few modifications.

OP asked in some comment...

Why will System.import(...) from ES6 be needed for js modules when we have the ES6 import/export module loading capabilities? Aren't they performing the same tasks?

import statement can be only at the top of a code file. Sometimes you know what files to load based on executing some kind of logic, and import syntax doesn't support conditionals.

For example, let's say you've an application which requires plugins, and some options have a flag called loadPlugins which can be true or false. Thus, you'll want to load them if the application wants them loaded:

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

edited Aug 20, 2016 at 13:38

answered Aug 20, 2016 at 13:14

Matías Fidemraizer

65.1k19 gold badges132 silver badges216 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

qarthandso Over a year ago

Thank you. Why will System.import(...) from ES6 be needed for js modules when we have the ES6 import/export module loading capabilities? Aren't they performing the same tasks?

Matías Fidemraizer Over a year ago

@qarthandso I'm going to answer this in my own answer as an update ;)

qarthandso Over a year ago

Ah I understand. Thank you. Are you using that code from a specific plugin? Or is Promise a js keyword? I don't understand the code but I understand the concept of import vs System.import now!

Matías Fidemraizer Over a year ago

@qarthandso Oops! Promise is already available in modern browsers. It's the implementation of this standard: promisesaplus.com. It's an elegant way to implement asynchronous programming. System.import returns a promise, and you can attach a then handler to do something once the operation has been completed.

Matías Fidemraizer Over a year ago

@qarthandso You're welcome! Now you've reasons to use your spare time

|

Collectives™ on Stack Overflow

Simple JavaScript ES6 vs require() importing

1 Answer 1

OP asked in some comment...

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

OP asked in some comment...

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related