Betcha didn't know that?!
by Markus Hatvan
Helpful npm/yarn commands that you need to know
Do you prefer or ?
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-lockfileor
npm cimuch wow!
999x faster!
awesome!
Dependency management
General suggestions
When upgrading dependencies:
- read CHANGELOG.md or go through releases on github to find documented changes
- upgrade all deps with patch version changes and commit
- upgrade all deps with minor version changes and commit
- 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 v4up 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 --globalcheck 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/doctorRandom 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')
Check out my other talk!
"How to boost your web development efficiency"
presented at Angular Vienna
Thank you for your attention!
Betcha didn't know that?!
By chimpcmder
