Day 17, Day 18 - Intermediate JS: ES6 Modules
WebDev Series
2 March, 2024
22
22
0
Contributors
- Day 17, Day 18 - Intermediate JS: ES6 Modules
- We went from plain HTML and JS to using - link
- a package manager to automatically download 3rd party packages
- Ex: npm
- a module bundler to create a single script file
- Ex: webpack
- a transpiler to use future JavaScript features
- Ex: babel
- a task runner to automate different parts of the build process.
- Ex: webpack runner
- semver - Semantic Versioning - link
- Version number - MAJOR.MINOR.PATCH
- Given a version number MAJOR.MINOR.PATCH, increment the:
- MAJOR version when you make incompatible API changes
- MINOR version when you add functionality in a backward compatible manner
- PATCH version when you make backward compatible bug fixes
- Use
package.jsonconfig file to manage the dependencies - ES6 Modules (ESM)
Background: Before ES6, there was no straight forward way to handle multiple JS files for a single page in browser. Node, to handle multiple JS files, uses
CommonJS moduleswhich is not for the browser. ES6 modules work for both (Node & browser), [For Node, the default is still CommonJS] - ES6 has only 2 components →
*import*and***export*** - First of all, the module pattern is different from ES6 modules
- Benefits of ES6
- Code reusability
- Only the things which are exported can be accessed in other modules after importing
- Any declarations in the module are not added to the global scope.
- We can still export constructors, classes & factory functions from modules.
- No need of IIFEs (module patterns) anymore.
- default export vs named export
- ref: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export#:~:text=the default export can be imported with any name.
- The default export can be imported with any name where as the named export must be imported with the same name unless renamed it with
aswhile exporting 🙂
export ... from ...is a combination of both import and export statements mostly used in barrel modules - mdn docs linknpm init- To create apackage.json- Asks a bunch of questions & creates a
package.json(which lists the packages our project depends on) which can be used by other devs instead of trying to use thenode_modulesdirectory
- Asks a bunch of questions & creates a
- ES6 has only 2 components →