Question

npm 是随同 NodeJS 一起安装的包管理工具，能解决 NodeJS 代码部署上的很多问题，常见的使用场景有以下几种：

• 允许用户从 NPM 服务器下载别人编写的第三方包到本地使用。

• 允许用户从 NPM 服务器下载并安装别人编写的命令行程序到本地使用。

• 允许用户将自己编写的包或命令行程序上传到 NPM 服务器供别人使用。

  # 查看当前版本
  $ npm -v
  
  # install 后空是根据当前目录下的 package.json 安装；否则安装指定包，@版本号
  npm install
  npm install xx
  npm install xx@x.x
  
  # npm 升级自身
  $ npm install npm -g
  

cnpm : 淘宝镜像的 npm, 中国区用户速度更快

# 安装 cnpm
$ sudo npm install -g cnpm --registry=https://registry.npm.taobao.org

# 或者 npm 设置淘宝源
$ sudo npm config set registry https://registry.npm.taobao.org

npm 命令

$ npm --help
Usage: npm <command>

where <command> is one of:
    access, adduser, audit, bin, bugs, c, cache, ci, cit,
    clean-install, clean-install-test, completion, config,
    create, ddp, dedupe, deprecate, dist-tag, docs, doctor,
    edit, explore, fund, get, help, help-search, hook, i, init,
    install, install-ci-test, install-test, it, link, list, ln,
    login, logout, ls, orgtdated, owner, pack, ping, prefix,
    profile, prune, publish, rb, rebuild, repo, restart, root,
    run, run-script, s, se, search, set, shrinkwrap, star,
    stars, start, stop, t, team, test, token, tst, un,
    uninstall, unpublish, unstar, up, update, v, version, view,
    whoami

npm <command> -h  quick help on <command>
npm -l      display full usage info
npm help <term>   search for help on <term>
npm help npm   involved overview

Specify configs in the ini-formatted file:
    C:\Users\keefe\.npmrc
or on the command line via: npm <command> --key value
Config info can be viewed via: npm help config

npm@6.13.2 C:\Users\keefe\AppData\Roaming\npm\node_modules\npm

# aliases：命令别名
$ npm run --help
npm run-script <command> [-- <args>...]

aliases: run, rum, urn

$ npm install --help
npm install (with no args, in package dir)
npm install [<@scope>/]<pkg>
npm install [<@scope>/]<pkg>@<tag>
npm install [<@scope>/]<pkg>@<version>
npm install [<@scope>/]<pkg>@<version range>
npm install <alias>@npm:<name>
npm install <folder>
npm install <tarball file>
npm install <tarball url>
npm install <git:// url>
npm install <github username>/<github project>

aliases: i, isntall, add
common options: [--save-prod|--save-dev|--save-optional] [--save-exact] [--no-save]

备注：

• npm init 会产生初始的 package.json
• npm run xx 是最常用，用来启动各种命令如 dev(热更新代码，用于开发环境) build(构建生产版本) lint ...
• npm install 安装依赖于 package.json, 注意是--save-dev 还是 -g，默认是--save-dev 保存在当前路径
• npm ci 类似 install，冻结安装，依赖于 package.json.lock，安装更快也更严谨。
• npm list/npm show -g 列出 npm 所有安装的包,
• npm show xxx 列出某个包的详细情况
• npm root -g 查看全局安装路径
• npm config ls 列举出 npm 基本配置信息

npm 配置项

# 列出 npm 主要配置项
$ npm config list
; cli configs
metrics-registry = "https://registry.npm.taobao.org/"
scope = ""
user-agent = "npm/6.14.11 node/v10.24.0 win32 x64"

; project config ~\repos\script-langs\toolkit\etc\.npmrc
cache = "C:\\Users\\keefe\\nodejs\\node_cache"
prefix = "C:\\Users\\keefe\\nodejs\\node_global"
registry = "https://registry.npm.taobao.org/"

; userconfig C:\Users\keefe\.npmrc
cache = "C:\\Users\\keefe\\nodejs\\node_cache"
prefix = "C:\\Users\\keefe\\nodejs\\node_global"
registry = "https://registry.npm.taobao.org/"

; node bin location = D:\dev\langs\nodejs\node-v10.24.0-win-x64\node.exe
; cwd = ~\repos\script-langs\toolkit\etc
; HOME = C:\Users\keefe
; "npm config ls -l" to show all defaults.

# 列出 npm 所有可配置信息
$ npm config list --json
{
  "json": true,
  "user-agent": "npm/6.14.11 node/v10.24.0 win32 x64",
  "metrics-registry": "https://registry.npm.taobao.org/",
  "scope": "",
  "prefix": "C:\\Users\\keefe\\nodejs\\node_global",
  "cache": "C:\\Users\\keefe\\nodejs\\node_cache",
  "registry": "https://registry.npm.taobao.org/",
  "access": null,
  "allow-same-version": false,
  "always-auth": false,
  "also": null,
  "audit": true,
  "audit-level": "low",
  "auth-type": "legacy",
  "before": null,
  "bin-links": true,
  "browser": null,
  "ca": null,
  "cache-lock-stale": 60000,
  "cache-lock-retries": 10,
  "cache-lock-wait": 10000,
  "cache-max": null,
  "cache-min": 10,
  "cert": null,
  "cidr": null,
  "color": true,
  "depth": null,
  "description": true,
  "dev": false,
  "dry-run": false,
  "editor": "notepad.exe",
  "engine-strict": false,
  "force": false,
  "format-package-lock": true,
  "fund": true,
  "fetch-retries": 2,
  "fetch-retry-factor": 10,
  "fetch-retry-mintimeout": 10000,
  "fetch-retry-maxtimeout": 60000,
  "git": "git",
  "git-tag-version": true,
  "commit-hooks": true,
  "global": false,
  "globalconfig": "C:\\Users\\keefe\\nodejs\\node_global\\etc\\npmrc",
  "global-style": false,
  "group": 0,
  "ham-it-up": false,
  "heading": "npm",
  "if-present": false,
  "ignore-prepublish": false,
  "ignore-scripts": false,
  "init-module": "C:\\Users\\keefe\\.npm-init.js",
  "init-author-name": "",
  "init-author-email": "",
  "init-author-url": "",
  "init-version": "1.0.0",
  "init-license": "ISC",
  "key": null,
  "legacy-bundling": false,
  "link": false,
  "loglevel": "notice",
  "logs-max": 10,
  "long": false,
  "maxsockets": 50,
  "message": "%s",
  "node-options": null,
  "node-version": "10.24.0",
  "offline": false,
  "onload-script": null,
  "only": null,
  "optional": true,
  "otp": null,
  "package-lock": true,
  "package-lock-only": false,
  "parseable": false,
  "prefer-offline": false,
  "prefer-online": false,
  "preid": "",
  "production": false,
  "progress": true,
  "proxy": null,
  "https-proxy": null,
  "noproxy": null,
  "read-only": false,
  "rebuild-bundle": true,
  "rollback": true,
  "save": true,
  "save-bundle": false,
  "save-dev": false,
  "save-exact": false,
  "save-optional": false,
  "save-prefix": "^",
  "save-prod": false,
  "script-shell": null,
  "scripts-prepend-node-path": "warn-only",
  "searchopts": "",
  "searchexclude": null,
  "searchlimit": 20,
  "searchstaleness": 900,
  "send-metrics": false,
  "shell": "C:\\Windows\\system32\\cmd.exe",
  "shrinkwrap": true,
  "sign-git-commit": false,
  "sign-git-tag": false,
  "sso-poll-frequency": 500,
  "sso-type": "oauth",
  "strict-ssl": true,
  "tag": "latest",
  "tag-version-prefix": "v",
  "timing": false,
  "tmp": "C:\\Users\\keefe\\AppData\\Local\\Temp",
  "unicode": false,
  "unsafe-perm": true,
  "update-notifier": true,
  "usage": false,
  "user": 0,
  "userconfig": "C:\\Users\\keefe\\.npmrc",
  "umask": 0,
  "version": false,
  "versions": false,
  "viewer": "browser",
  "globalignorefile": "C:\\Users\\keefe\\nodejs\\node_global\\etc\\npmignore"
}

npm 安装扩展模块
npm 的包安装分为本地安装（local）、全局安装（global）两种。可以用 npm root [-g|] 查看安装路径。

• 本地安装（local）：分--save( 无参数时默认 ) 和 --save-dev。安装路径在 ./node_modules 下（运行 npm 命令时所在的目录）。
• 全局安装（global）：-g，默认安装路径在~/.node_modules 下（以配置文件.npmrc 为准，通常推荐安装 webpack, webpack-dev-server, babel）。

示例安装

# 安装到全局环境
npm install 依赖包[@版本号] -g
# 安装到当前环境并添加到 package.json 的 dependencies 部分
npm install 依赖包[@版本号] --save
# 安装到当前环境并添加到 package.json 的 devDependencies 部分
npm install 依赖包[@版本号] --save-dev

npm 配置文件 .npmrc

prefix=~\nodejs\node_global
cache=~\nodejs\node_cache
registry=https://registry.npm.taobao.org/

npm 常用模块

packae.json 里的组件版本含义

• “5.0.3” 表示安装指定的 5.0.3 版本，
• “～5.0.3” 表示安装 5.0.X 中最新的版本， npm install npm@5.0 -g
• “^5.0.3” 表示安装 5.X.X 中最新的版本。 npm install npm@5 -g
• ">= 5.0.3 < 5.1.0" 表示安装在 5.0.3 到 5.1.0 之间的版本。

表格 npm 常用扩展模块

框架	模块名	说明	使用
vue	vue	脚手架，快速搭建开发环境。用来生成模板的 vue 工程。	import Vue from 'vue'
	组件经典组合	vue-cli + vue-router(路由) + vue-x(扩展)	import VueRouter from "vue-router"
	vue-resource		import VueResource from 'vue-resource'
react	react	react 框架核心模块。
	组件经典组合	react-dom + react-router(路由) + react-redux(扩展)
	react-scripts	react 脚本，用来构建脚本命令。使用在 package.json。
express	express	基于 node.js 的框架。脚手架。它提供了一套强大的功能来开发 Web 和移动应用程序。	var express = require('express'); var app = express();
其它	D3.js	数据可视化前端开发包。	安装：bower install d3 --save
	eCharts	百度开源的数据可视化前端开发包。
	Yeoman	脚手架。	安装：npm install -g yo
	gh-pages	文档构建和部署
	ejs	模板引擎
	github	github api

备注：参数选项--save-dev 为保存到开发目录（即当前目录，缺省选项。同时会写入到 package.json 里的 devDependencies; --save 写入到 Dependencies ），-g 保存到全局目录。

1. npm 包安装： npm/cnpm install [npm] --save-dev

2. 前端相关的包安装: bower install [npm] --saves

表格 前端工程化所需的 npm 模块

工具	模块	说明
webpack	webpack	可以构建打包。配置文件 webpack.config.js
	webpack-dev-server	基于 Express 框架的 Node.js 服务器。它还提供了一个客户端的运行环境，会被注入到页面代码中执行，并通过 Socket.IO 与服务器通信。 服务器端的每次改动与重新构建都会被通知到页面上。还提供了如模块替换这样强大的功能。
babel	babel-core	bable 转化 JS。配置文件.babelrc
	babel-preset-es2015	babel 的 ES6 语法包
	babel-preset-react	babel 的 React 语法包
	babel-runtime
eslint	eslint	最新版本 @3.19.0。配置文件.eslintrc.js
	eslint-config-airbnb	ESLint 的第三方配置规则 eslint-config-airbnb 依赖 3 个插件：eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y
Webpack -loader		loader 专注于处理资源内容。Webpack 默认只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。插件：eslint-loader babel-loader style-loader css-loader less-loader sass-loader file-loader url-loader
Webpack -plugin		plugin 可以实现那些 loader 实现不了或者不适合在 loader 实现的功能，比如自动生成项目的 HTML 页面、向构建过程中注入环境变量等。插件：html-webpack-plugin uglifyjs-webpack-plugin
	clean-webpack-plugin	清除 webpack 之前打包的文件。
tools	cross-env	设置环境变量，兼容 windows 和 linux。示例 cross-env NODE-ENV=prod

备注：用于开发 npm instlal xx --save-dev

npm 常见问题

Q1: cygpath command not found

描述：windows cygwin 环境报上面错， cygpath command not found

原因：cygwin 兼容性问题。

解决方法：

Q2：npm 安装过程失败，重新安装总失败

原因：需要清除缓存

解决方法：1.先删除 node_module 目录。2.清除 cache 或不使用 cache --no-cache-dir

$ rm -rf node_modules
$ npm cache clean --force
$ npm install -d  #开发模式安装，会安装 dependencies 和 devDependencies，安装模块会更多些
$ npm run dev  #开发模式运行，即时编译，有修改即会触发编译。发布到生产时可用 npm run build

Q3： 解决 linux 下 nodejs 中 watch 文件最大数异常

描述：

ENOSPC: System limit for number of file watchers reached

解决方法：

$ echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

Q4： moduleName is declared but its value is never read

描述：TS6133: xx is declared but its value is never read. 出现在 typescript 类型里。

解决方法：TS 类型检测报警。若要真正解决，声明了变量就要使用，否则移除。

不报此警告的解决方法

法 1：在错误语句后面添加注释 // eslint-disable-line no-unused-vars

法 2：TS 配置文件修改，tsconfig.json， noUnusedLocals 修改为 false，默认 true 时为需要检查，false 不检查

{
  "compilerOptions": {
    "noUnusedLocals": false, #TS6133-没有未使用变量
  },
  "include": [],
  "exclude": ["./node_modules/*superset-ui*/**/node_modules/@superset-ui/**/*"]
}

法 3：旧的 ES 检查。在 package.json 或者.eslintrc.js 其 rules 下加入"no-unused-vars": "off"即可，然后重新 npm run serve 即可。

# .eslintrc.js
module.exports = {
  rules: {
    'import/no-cycle': 0, // re-enable up for discussion, might require some major refactors
    'import/prefer-default-export': 0,
    'no-bitwise': 0,
    'no-unused-vars': 0,
  },
};