Understanding ES6 modules with regards to Angular2 web application

Question

Below points explain my understanding and questions of ES6 modules with regards to Angular2 web application development.

1. As per my understanding , modules (export/import) have been introduced in ES6 , and that the current browsers support export / import syntax , but they do not support module loading.

2. Because the current Browsers do not support module loading , either we have use module loaders like systemJS which will take care of loading the modules by making some kind of AJAX calls , or we have to use module bundlers like webpack which will bundle all the modules in to a single JS file.

Please let me know whether points 1 and 2 are correct or not.

3. I observed that most of the time "target" property in tsconfig.json is to "es5" , should this be always be set to "es5" with regards to Angular 2 web applications OR can it be modified based on whether we are using systemJS or webpack

Answer 1

1. Pretty much
2. True, though there are differences between the module systems.
   Fortunately typescript lets you write in a single format and will compile it to the right system based on the module compiler option that you pass it.
3. I'm not sure where you got your statistics that you concluded that target is usually es5, it depends where the application intends to run and which es6 features you are planning on using.
   For example Promise, const/let, arrow functions and many others of the es6 features are already implemented in most up to date browsers.
   You can check per feature you're planing on using the compatibility table (which you can find for each feature in MDN) and find out on your own if you can target es6 or not.
   If you can't but would still like to, then you can try using babel.