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

1# add a package global
2yarn global add create-react-app
3
4# add a package local and save to dependencies
5yarn add prismjs
6
7# add a package local and save to devDependencies
8yarn add gulp --dev
9
10# add a package local and save to peerDependencies
11yarn add prismjs --peer
12
13# add a package local and save to optionalDependencies
14yarn add prismjs --optional
15

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 <project folder>

  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

  1"rules": {
  2  "no-console": "off"
  3}
  

• configure flow

  crete .flowconfig

  yarn flaw init

edit .flowconfig

1[ignore]
2.*/node_modules/config-chain/.*
3
4[include]
5
6[libs]
7
8[lints]
9all=warn
10
11[options]
12
13[strict]
14nonstrict-import
15unclear-type
16untyped-import
17untyped-type-import
18unsafe-getters-setters
19sketchy-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", "...": "..." } } }