The old way

• Manually download dependencies
• Link to dependencies on a CDN
• Manually update
• Commit dependencies to your VCS

The new way

npm

• Official package manager for node.js
• Installed automatically with node.js
• The npm registry contains 155k ... 355k ... 427k ... 612k over a million packages

npm: package.json

• Manifest file with name, version, author, website, etc.
• Lists all the dependencies of your application
• Divided into development and production dependencies
• Versions
• Corresponding lockfile package-lock.json

npm: versioning

semver - semantic versioning

• MAJOR.MINOR.PATCH ( i.e. Version: 2.1.7 )
  • MAJOR: incompatible API changes
  • MINOR: new functionality in a backwards-compatible manner
  • PATCH: backwards-compatible bug fixes

npm: versioning

special characters

• ~1.2.7 will update to latest PATCH ( 1.2.x )
• ^1.2.7 will update to latest MINOR ( 1.x.x )
• >=1.2.7 <1.3.0 will update to 1.2.8 and 1.2.9
• 1.2.7 will match 1.2.7 exactly
• * will match any version
• latest will match latest release

npm: commands

• npm init [-f] creates a package.json file
• npm install or i
  Downloads all dependencies to the current directory (./node_modules)
• npm i [name]
  Downloads the package to the current directory
• npm i lib@1.1.2
  Downloads the specified version of a package

npm: commands

• npm update
  Update dependencies to the latest specified version
• npm outdated
  Scan project for outdated dependencies
• npm audit
  Scan project for dependencies having vulnerabilities
• npm init
  Create a new package.json

npm install: arguments

• -g or --global
  Installs a package globally. Usually used for command line interfaces
• -S or --save
  Adds a dependency to your package.json
• -D or --save-dev
  Adds a devdependency to your package.json

npm install: arguments

• -E or --save-exact
  In combination with -D or -S will save an exact version without any "^" or "~" in your package.json

npx

• npx [name]
  Executes a command only once
• Handles command as if node_modules/ was in $PATH
• Works in any directory and is useful for e.g. initialization

npm runkit

Test packages directly in the browser

👉🏼 date-fns

Exercise Time 🧠

1-Dependency

• Fork https://github.com/webplatformz/javascript-ecosystem-exercises on Github
• Clone locally
• Run npx http-server in corresponding exercise folder
• Try out ToDo app

Exercise Time 🧠

1-Dependency

• Initialize package.json
• Install bootstrap with version 3.3.7
• Add reference to bootstrap.min.css in index.html
• Reload the browser and try out the styled ToDo app