Guide: Javascript - Modules, Package Managers and Bundlers
Description
In the old days (I mean, around 2010) life was simple: if you wanted to use a Javascript library you'd just go their website, download a .js file plug it into your website and voilà: things were already working. In modern times, though, the web development ecosystem became a lot more powerful but also a lot more complicated and everything has many (like, many) dependencies. That is why we need to use package managers such as npm or yarn.
In this Guide you will explore these softwares to learn how they can help your workflow.
Knowledge
- Understand what is a package manager
- Understand what a dependency is
- Understand what a bundler is
Skills
- Be able to use a package manager such as npm
- Be able to bundle a code base
Topics
- ES6 Modules
- Import / Export
- Package Managers
- NPM & Yarn
- NPM Scripts
- What is a bundler?
- Parcel
Action Points
- Learn what are Modules in Javascript
- Compare ES6 Modules and CommonJS modules to find out their differences
- Learn how to use npm to install a package (start with cowsay?)
- Define what are Javascript bundlers
- Create a modular application (can contain 2-3 modules) and bundle it with Parcel or similar
Deliverable: Reusable module
- Submit:
- Glitch Project URL or Github Repository + Github Pages URLs
- Add comments for each relevant code block
- Project description and details in the README.md file
- Glitch Project URL or Github Repository + Github Pages URLs
- Minimum requirements:
- Create a Module that can be used in any web page to add some feature
- Demonstrate the usage in a demo file bundled with Parcel
- Possible to use other bundlers
- Can be a back-end module (Node)
- Theme ideas:
- Modal creator
- Add decoration around mouse pointer
- Improved alert messages
- Cookies notice