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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 强化学习读书笔记 - 06~07 - 时序差分学习(Temporal-Difference Learning)

    绿巨人
  • 强化学习读书笔记 - 02 - 多臂老O虎O机问题

    绿巨人
  • 机器学习实战 - 读书笔记(05) - Logistic回归

    绿巨人
  • 从 Salesforce 身上学到 SaaS 公司走向成功的 7 个必备条件

    最近我们看到一大波 SaaS 公司进行了 IPO。在 2014 年出现了一披非常热门的公司,比如 Zendesk, Hubspot, New Relic, 以及...

    臭豆腐
  • Python3下的【并行迭代】与【按索引

    在使用python3时,有【并行迭代】与【按索引迭代】,并行迭代相对来说好理解,现在介绍下【按索引迭代】。

    py3study
  • JMS中间件ActiveMQ详解

    Java Message Service(JMS)是SUN提出的旨在统一各种MOM(Message-Oriented Middleware )系统接口的规范,它...

    烂猪皮
  • MySQL中 InnoDB 和 MyISAM 小结

    InnoDB和MyISAM是许多人在使用MySQL时最常用的两个表类型,这两个表类型各有优劣,视具体应用而定。基本的差别为:MyISAM类型不支持事务处理等高级...

    阳光岛主
  • iOS如何实现多个环境一次打包

    概述 偶然看到一个很有趣的问题:如何在ios环境下实现多个环境同时打包。 谈到多环境,我想大多公司都至少有2-3个环境,比如Test环境,UAT(User Ac...

    xiangzhihong
  • iOS如何实现多个环境一次打包

    概述 偶然看到一个很有趣的问题:如何在ios环境下实现多个环境同时打包。 谈到多环境,我想大多公司都至少有2-3个环境,比如Test环境,UAT(User Ac...

    xiangzhihong
  • Java中ArrayList remove会遇到的坑

    前言 平时最常用的莫过于ArrayList和HashMap了,面试的时候也是问答的常客。先不去管容量、负载因子什么的,就是简单的使用也会遇到坑。 ? Rem...

    Ryan-Miao

扫码关注云+社区

领取腾讯云代金券