Let's consider web app project root directory which contains the following files:
scripts/common.js:
scripts/array_demo.js:
In HTML file scripts have to be added in order so functions, objects, or primitive values from previously included scripts are visible in scripts that use them:
views/array_demo.html:
This can be a problem in case when there are many and/or complex dependencies. The solution is using ECMAScript modules. This will work in HTML5-compliant browsers.
A classic script is just a standard JavaScript script as you know it. A module script is one that contains an ES6 module, i.e. it uses (or: can use) import and export declarations. [source]
scripts/common.js:
scripts/array_demo.js:
views/array_demo.html:
export and import statements are defined in ECMAScript 2015 (6th Edition, ECMA-262).
module script type is available only in HTML5-compliant browsers [source].
Require.JS "modularizes" JS scripts and basically emulates import/export functionality. With ES6 modules available there is no need to use Require.JS.
ECMAScript modules in browsers
ES6 In Depth: Modules
HTML/Element/script (MDN)
ECMAScript 6 modules: the final syntax
export (MDN)
import (MDN)
CommonJS vs AMD vs RequireJS vs ES6 Modules
scripts/common.js
scripts/array_demo.js
views/array_demo.html
scripts/array_demo.js
views/array_demo.html
Without modules:
scripts/common.js:
function clearElement(id) {...}
function log(text) {...}
function log(text) {...}
scripts/array_demo.js:
function foo() {
clearElement(...);
log(...);
};
clearElement(...);
log(...);
};
In HTML file scripts have to be added in order so functions, objects, or primitive values from previously included scripts are visible in scripts that use them:
views/array_demo.html:
...
<script src='/scripts/common.js'></script>
<script src='/scripts/array_demo.js'></script>
</body>
</html>
<script src='/scripts/common.js'></script>
<script src='/scripts/array_demo.js'></script>
</body>
</html>
This can be a problem in case when there are many and/or complex dependencies. The solution is using ECMAScript modules. This will work in HTML5-compliant browsers.
With modules:
What is the difference between a common (classic) JavaScript script and a module?
A classic script is just a standard JavaScript script as you know it. A module script is one that contains an ES6 module, i.e. it uses (or: can use) import and export declarations. [source]
scripts/common.js:
function clearElement(id) {...}
function log(text) {...}
export {
clearElement,
log
};
function log(text) {...}
export {
clearElement,
log
};
scripts/array_demo.js:
import { clearElement, log} from './common.js';
function foo() {
clearElement(...);
log(...);
};
function foo() {
clearElement(...);
log(...);
};
views/array_demo.html:
...
<script type="module" src='/scripts/array_demo.js'></script>
</body>
</html>
<script type="module" src='/scripts/array_demo.js'></script>
</body>
</html>
export and import statements are defined in ECMAScript 2015 (6th Edition, ECMA-262).
module script type is available only in HTML5-compliant browsers [source].
Modules VS Require.JS
Require.JS "modularizes" JS scripts and basically emulates import/export functionality. With ES6 modules available there is no need to use Require.JS.
Further reading:
ECMAScript modules in browsers
ES6 In Depth: Modules
HTML/Element/script (MDN)
ECMAScript 6 modules: the final syntax
export (MDN)
import (MDN)
CommonJS vs AMD vs RequireJS vs ES6 Modules
No comments:
Post a Comment