In one of my previous articles Native ECMAScript modules: the new features and differences from Webpack modules we attempted to detect if the browser supported ES modules. We needed this to determine either, to execute a bundled (classic) file or a script which uses the native ECMAScript module features.
We managed to achieve this, but in reality how it was achieved isn’t ideal. The community have since come together to propose an alternative, the
nomodule script attribute.
In the previous article
Native ECMAScript modules: the new features and differences from Webpack modules
we understood the differences between ES modules and their implementation in bundlers/compilers like Webpack/Babel.
So far we found couple gotchas and know how to use the
export declarations and
which caveats we may have using them in JS.
Meet the dynamic
import() operator, which adds the missed functionality and follows the best practices of
For many years the Web is moving towards the parity with the Mobile native applications and adds the missed features. Today browsers have most of them, from the offline mode and enhancements with the Service Workers to Geolocation and NFC.
The one huge ability, which is still missed, but highly used in the mobile applications- the ability to share a page, article or some specific data.
The Web Share API is the first step to fill the gap and bring the native sharing capabilities to the Web....
For now, we have 2 available implementations, which we tried and compared to the bundled module.
The main takeaways, so far, are:
- To execute a script or load an external file and execute it as a module use
.jsextension cannot be omitted in the
import(the exact URL should be provided)
- the modules’ scope is not global and
thisdoesn’t refer to anything
- native modules are in the strict mode by default (not needed to provide
- module scripts are deferred by default (like
In this article, we are going to understand other differences with the bundled modules, abilities to interact with the module scripts, how to rewrite Webpack modules to native ES ones and other tips and tricks....