Node JS World
Posted 想想你应该干什么
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Node JS World相关的知识,希望对你有一定的参考价值。
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 <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
"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",
"...": "..."
}
}
}
以上是关于Node JS World的主要内容,如果未能解决你的问题,请参考以下文章
Node.js 学习一 第一个Node.js应用--Hello World!