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 nvmcurl -o- https://raw.githubusercontent.com/creationix/nvm/v0.34.0/install.sh | bash# list remote versionsnvm ls-remote# install the latest onnvm install v11.8.0# use the versionnvm use v11.8.0# always default to the latest available node version on a shellnvm alias default node

• yarn: a faster node package manager

# configure repositorycurl -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 yarnsudo apt-get update && sudo apt-get install yarn

Yarn

# add a package globalyarn global add create-react-app# add a package local and save to dependenciesyarn add prismjs# add a package local and save to devDependenciesyarn add gulp --dev# add a package local and save to peerDependenciesyarn add prismjs --peer# add a package local and save to optionalDependenciesyarn add prismjs --optional

React

• installation

# install create-react-appyard global add create-react-app# create a react applicationnpx 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 utilitynpm install gulp-cli -g## Install the gulp package in your devDependencies## cd <project folder>npm install gulp --save-dev## Verify your gulp versionsgulp --help## new a gulp task filetouch gulpfile.js

ESLint

The pluggable linting utility for JavaScript and JSX

• install and start

# install the eslint package in your devDependenciesyarn add eslint --devyarn add eslint-config-react-app --devyarn add eslint-plugin-import --devyarn add eslint-plugin-flowtype --devyarn add eslint-plugin-jsx-a11y --devyarn add eslint-plugin-react --devyarn add flow-bin --dev## check versionnpm run lint -v## or ./node_modules/eslint/bin/eslint.js -vyarn 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 .flowconfigyarn flaw init

edit .flowconfig

[ignore].*/node_modules/config-chain/.*[include][libs][lints]all=warn[options][strict]nonstrict-importunclear-typeuntyped-importuntyped-type-importunsafe-getters-setterssketchy-null

• check rules

yarn lintyarn 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", ?????"...": "..." ???} ?}}

Node JS World

原文地址：https://www.cnblogs.com/steven-yang/p/10340196.html