Package management with NPM
Types of Dependencies
- Dependencies: deps required for package to run.
i.e. React, apollo-server, @nestjs/core - Dev dependencies: deps required for package to build&test.
i.e. Jest, Webpack, prettier - PeerDependencies: deps required that needs to be installed separately
i.e. react-redux → react, @nestjs/core → @nestjs/testing
Example:
{
"name": "@orderfoxag/webpack-random-plugin",
"dependencies": {
"lodash-es": "^4.17.15"
},
"devDependencies": {
"jest": "^27.2.5",
"webpack": "^5.35.0"
},
// ⚠️ won't be installed (if npm < 7)
"peerDependencies": {
"webpack": "5.x"
}
}Dependencies requirements
{
"dependencies": {
"foo": "1.0.0 - 2.9999.9999",
"bar": ">=1.0.2 <2.1.2",
"baz": ">1.0.2 <=2.3.4",
"boo": "2.0.1",
"qux": "<1.0.0 || >=2.3.1 <2.4.5 || >=2.5.2 <3.0.0",
"asd": "http://asdf.com/asdf.tar.gz",
"til": "~1.2",
"elf": "~1.2.3",
"two": "2.x",
"thr": "3.3.x",
"lat": "latest",
"dyl": "file:../dyl"
}
}SEMVER - SEMantic VERsioning
1.2.3-beta1
- major: any breaking changes (NOT safe to update)
- minor: new features (safe to update)
- patch: bug fix (safe to update)
- optional label: for prerelease, alphas, betas...
🤔 What about...
refactors, CI, documentation, performances, tests
👉 should NOT trigger a bump!
package-lock.json
It's a snapshot for dependencies tree.
Should we commit
package-lock.json?
package-lock.json?
Yes.
package-lock.json and installation
🐌 npm install: install deps, rewrite/update lockfile if needed
🏎 npm ci: install deps, lockfile is readonly
The node_modules problem
Focus: Module resolution
Given A{B,C}, B{C}, C{D}
A
├── B
├── C
└── D
Given A{B,C}, B{C,D@1}, C{D@2}
A
├── B
├── C
│ └── D@2
└── D@1
Long story short: managing dependencies is hard
🙏 Please think twice before adding a new dependency 🙏
Focus: What about pnpm?
Focus: What about Yarn (w/ PnP)?
├── .yarn
│ └── cache
│ │── react.npm.16.0-338864c-1.zip
│ └── webpack.npm.5.0-34c7815a3d-1.zip
├── package.json
└── yarn.lock
- Idea is interesting since it simplify hoisting
- Same concept as composer (PHP)
- 🏋️♀️ Benchmark npm vs. yarn
- Not as revolutionary as it looks - React/Webpack/etc. still use Yarn v1
Package deployment
Option 1: CLI
$ npm login
> Username: maxpou
> Password: ********
> Email: (this IS public) maxence.p*****@gmail.com
# optional
$ npm version minor --no-git-tag-version
v1.0.0
$ npm publish
npm notice === Tarball Details ===
npm notice name: @orderfoxag/reference-data
npm notice version: 1.0.0
npm notice filename: @orderfoxag/reference-data-1.0.0.tgz
npm notice [xxx]
npm notice Publishing to https://npm.pkg.github.com/
+ @orderfoxag/reference-data@1.0.0
Option 2: Conventional commits
Option 3: GitHub Actions