script type="module">
import {addText} from './utils.js';
addText('Modules are pretty cool.');
</script>
Google Chrome version 61 adds in native support for Javascript modules, I’m not sure if support existed before but not native of what, however it looks like it’s adding features similar to node.js with the modules. This looks really promising and I’m hoping to utilize it in my future projects. Thoughts?
yeah - write es6 with fear no more since modules are “use strict” only - it’s a great benefit of modules on par with the primary advantage of writing components even for small projects without frameworks and rollups - it’s a fantastic opportunity to learn to program in a modular way from the very beginning - freecodecamp would do well to incorporate modules into its curriculum early
there’s very few code samples with modules - even this little example can easily be split into couple more modules - I did not want to go overboard - I wanted a bit more than 5 lines yet still parseable in a forum post - I wanted to showcase the essentials of import and export - and some great modern javascript features like classes, fetch, async/await etc that help us write code that can be maintained and enhanced in a scalable manner
the <script nomodule> tag as shown in my sample above is understood and ignored by module-enabled browsers - this makes older browsers run fallback code - we can forge ahead with modules for new development and keep older code around for the transition
chrome and safari have modules enabled by default - firefox and edge have it behind flags - details in the browser compatibility chart at MDN
Obviously this is brand new so sites will have to check the user agent and decide which script to load, however over time this will be standardized. Most devices haven’t even auto-updated yet.
There is nomodule tag for module support detection as @ppc correctly mentioned earlier.
Anyway it seems the native module implementation has some problems such as compression of multiple files, lack of tree shaking etc so it’s tricky to use for production level apps.
Here is an article with more details