Node JS World
Environment
tested on Ubuntu
Install nvm/node/npm/yarn
nvm : node version manager
node: node js
npm: node package manager
goto the nvm office website and find the latest version, e.g. 0.34.0
install nvm
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.34.0/install.sh | bash
list remote versions
nvm ls-remote
install the latest on
nvm install v11.8.0
use the version
nvm use v11.8.0
always default to the latest available node version on a shell
nvm alias default node
yarn: a faster node package manager
configure repository
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add - echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
install yarn
sudo apt-get update && sudo apt-get install yarn
Yarn
# add a package global
yarn global add create-react-app
# add a package local and save to dependencies
yarn add prismjs
# add a package local and save to devDependencies
yarn add gulp --dev
# add a package local and save to peerDependencies
yarn add prismjs --peer
# add a package local and save to optionalDependencies
yarn add prismjs --optional
React
installation
install create-react-app
yard global add create-react-app
create a react application
npx create-react-app my-app
Development
dependencies vs devDependencies vs peerDependencies vs bundleDependencies
npm install
will get:- dependencies: installed
- devDependencies: installed
- bundelDependencies: indirectly installed via the packed way
- peerDependencies: a warning message
npm install --production
will get:- dependencies: installed
- bundelDependencies: indirectly installed via the packed way
- peerDependencies: a warning message
npm pack
will pack bundelDependencies
when to use devDependencies
- you do not want the package will be installed on the production environment, e.g. testing/utility packages.
when to use bundelDependencies
- you modified a dependency, so you do not want to use the one from npm registry
- you own projects
when to use peerDependencies
- you know there would be multiple incompatible versions, and need customers to solve the dependency manually.
Development Tools
npx: node package runner
babel: a JavaScript compiler. put in next-gen JavaScript -> Get browser-compatible JavaScript out
gulp: a task management office website
- install and start
Install the gulp command line utility
npm install gulp-cli -g
Install the gulp package in your devDependencies
cd
npm install gulp --save-dev
Verify your gulp versions
gulp --help
new a gulp task file
touch gulpfile.js
ESLint
The pluggable linting utility for JavaScript and JSX
install and start
install the eslint package in your devDependencies
yarn add eslint --dev yarn add eslint-config-react-app --dev yarn add eslint-plugin-import --dev yarn add eslint-plugin-flowtype --dev yarn add eslint-plugin-jsx-a11y --dev yarn add eslint-plugin-react --dev yarn add flow-bin --dev
check version
npm run lint -v
or ./node_modules/eslint/bin/eslint.js -v
yarn flaw version
configure eslint new a project root file: .eslintrc
{ "extends": [ "react-app", "eslint:recommended", "plugin:react/recommended" ], "plugins": [ "react" ], "settings": { "react": { "createClass": "createReactClass", "pragma": "React", "version": "detect", "flowVersion": "0.53" }, "propWrapperFunctions": [ "forbidExtraProps", { "property": "freeze", "object": "Object" }, { "property": "myFavoriteWrapper" } ], "linkComponents": [ "Hyperlink", { "name": "Link", "linkAttribute": "to" } ] }, "parserOptions": { "ecmaFeatures": { "jsx": true } }, "rules": { "no-console": "off" } }
disable a rule for a line
// eslint-disable-next-line no-console
disable a rule for a file
/* eslint-disable no-console */
disable a rule for the project via package.json
"rules": { "no-console": "off" }
configure flow
crete .flowconfig
yarn flaw init
edit .flowconfig
[ignore]
.*/node_modules/config-chain/.*
[include]
[libs]
[lints]
all=warn
[options]
[strict]
nonstrict-import
unclear-type
untyped-import
untyped-type-import
unsafe-getters-setters
sketchy-null
check rules
yarn lint yarn flaw
To fix formatting errors, run the following:
yarn lint -- --fix
husky
Git hooks made easy - Husky can prevent bad git commit
, git push
and more 🐶 woof!
install
npm install husky --save-dev
configure
// package.json { "husky": { "hooks": { "pre-commit": "npm test", "pre-push": "npm test", "...": "..." } } }