Last updated on March 20, 2020
In this blog post, you will learn how to make our JavaScript Module Works in Browser Without Extra Build Setup.
Introduction
As a JavaScript developer, we might see different module patterns for a decade of JavaScript improvement.
We have AMD (Asynchronous Module Definition – Used in Require.js), CommonJS (Used in Node.js), UMD (Universal Module Definition).
JavaScript ES Module in Browser Without Build Setup
Out of those module patterns, JavaScript ES Module (ECMAScript Module) pattern is becoming the most popular one.
ES Module pattern encourages import export in a more elegant fashion to use one JavaScript file into another JavaScript file. Here considered each JavaScript file as a single module.
Recent days of browser vendor’s growth in terms of development/improvement made us use JavaScript ECMAScript Module in the browser straight away without imposing to have any extra build setup.
For example, let’s consider we have index.js file that has following piece of code
export function log() {
console.log('JavaScript ECMAScript Module');
}If we did not set up our build configuration to transform ECMAScript latest code to ES5 code then the above index.js file wouldn’t work.
In order to make it work, we have an attribute type for script tag.
<script src="./index.js" type="module"></script>From the above code, It results in the logging piece since major browsers natively support ES Module.