How can we use es6 modules in modern web browsers without transpiling the code

Question

Is it possible to use es6 module system and import modules in web browsers?

Answer 1

With chrome 61, es6 module system is introduced to the world of web browsers. This link https://developers.google.com/web/fundamentals/primers/modules can be referred for more details on how chrome implements the module system.

Some of the important features of es6 module system discussed in the above link are:

1. Modules by default are strict mode.
2. They are not lexical top-level scope, which is var foo = 42 in module file won't be available as window.foo.
3. Modules are included in html file as <script type="module" src="example.mjs">
4. Modules are deferred by default

There are some other browsers too which have come up with solutions in their different versions. This below-given link explains the compatibility level of module system in different browsers. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#Browser_compatibility