Betcha didn't know that?!

by Markus Hatvan

Helpful npm/yarn commands that you need to know

https://github.com/mhatvan

Do you prefer          or           ? 

https://www.npmtrends.com/npm-vs-yarn

Dependency management

General suggestions

{
  "scripts": {
    "preinstall": "node -e \"if(process.env.npm_execpath.indexOf('yarn') === -1) throw new Error('You must use Yarn to install, not NPM')\""
  },
}

force use of npm/yarn

specify required version (node, npm, yarn)

{
  "engines": {
    "node": "^8 || ^10",
    "npm": "<5",
    "yarn": "1.22.0"
  },
}

always use pinned, reproducable dependencies for CI

yarn install –frozen-lockfile

or

npm ci

much wow!

999x faster!

awesome!

Dependency management

General suggestions

When upgrading dependencies:

  1. read CHANGELOG.md or go through releases on github to find documented changes
  2. upgrade all deps with patch version changes and commit
  3. upgrade all deps with minor version changes and commit
  4. upgrade one dep at a time with major version change and commit

of course also run lint, test, e2e and manual check

Dependency management

General suggestions

Be aware of dependency switching to scoped package naming!

react-navigation -> @react-navigation/native

babel-cli -> @babel/cli

create PACKAGE.md for files that cannot be updated atm

"typescript": "2.7.2"
keep locked until angular is compatible with typescript >= 2.8.0

"webpack": "3.11.0"
wait until 3rd party plugins support webpack v4

up to date, but not really...

npm 5+

npm is at least as fast as yarn again

benefit from npx

  • runs package bins from node_modules or downloads if not existant
  • no need to install one-time-use tools, e.g.: angular-cli globally anymore  

use command abbreviations

npm install -> npm i

npm uninstall -> npm r

issues with merge conflicts in package-lock.json?

no clue how to solve it?

npm doctor

  • verifies cache content
  • does garbage-collecting
  • checks file permissions

npm audit (fix)

  • checks package-lock.json for security issues, fixes if possible

Don't despair!

npx npm-merge-driver install --global

check for unused dependencies in package.json with npm-check -> needs manual checking for false positives because it only looks for require or import statements

npm 5+

Questions so far?

Don't hesitate to ask!

yarn

yarn v2 is RC27!!

yarn audit

  • checks package-lock.json for security issues, fixes if possible

upgrade deps with

yarn upgrade-interactive [--latest]

check for unused dependencies in package.json with yarn-check -> needs manual checking for false positives because it only looks for require or import statements

additionally to npm doctor, you can run

  • validates peer deps installed
  • detects issues in webpack.config.js
npx @yarnpkg/doctor

Random tips & tricks

  • use lodash-es instead of lodash (tree-shakable)

  • replace moment.js with date-fns, etc.

  • use optional chaining operator

  • use nullish coalescing when working with numbers instead of truthy checking

  • dont have to support old browsers? -> investigate transpiling to es6 instead of es5, see https://kangax.github.io/compat-table/es6/

  • scss -> use @import '~bootstrap' instead of '../../../node_modules/bootstrap'

  • use json-server or jsonplaceholder for mock data

  • use precommit lint/format hook to keep consistency within team

  • create-react-app can be created with typescript now

  • when lazy loading modules with webpack, you can name them: import(/* webpackChunkName: "print" */ './print')

Recording: https://www.youtube.com/watch?v=708el7zgGfY

Slides: http://slides.com/chimpcmder/how-to-boost-your-web-development-efficiency#/

Check out my other talk!

"How to boost your web development efficiency"

presented at Angular Vienna

Thank you for your attention!

Made with Slides.com