总结 npm

1. npm 命令详解

参考文章：

博客园 白树 npm 命令详解

阮一峰npm模块管理

1.1 npm link 问题

需要说明：npm link 在使用 ui 组件库的脚手架 和 业务组件库脚手架，如果两者的脚手架的eslint等配置不一致，使用了会报错。解决办法有两种：

1. 上传 npm 仓库来使用
2. 将打包后代码（当然，nodejs工具npm包不用打包）和源码 package.json 抽离出来，进行 npm link xxxnpm包。

1.1 package.json 配像说明

这里提供阮一峰package.json讲解，当讲解得不够完整，下面补充。

• typing，这里可以参考 nutui 使用方式

2. npm 源的问题

这部分其实npm config 命令知识点，因为太重要了。常常因为源的问题，导致安装包出现奇葩问题（别问我怎么知道的），如：安装的包不兼容，导致本地无法开发；测试环境包正常，发布到生产，包就出现问题，造成生产问题。

2.1 cnpm(不推荐)

npm install -g cnpm --registry=https://registry.npm.taobao.org

2.2 手动设置源

如果公司配有专门 npm 源，在自动发布时会设置公司内部源。

npm config set registry https://registry.npm.taobao.org

2.3 发布 npm 包，要指定源

发布 npm 包，执行 npm login 登陆不上，首先需要检查自己 npm 源对不？不对，则需要切换。

npm config set registry https://registry.npmjs.org/

2.4 安装的时候切换源

npm install -g @vue/cli --registry=https://registry.npm.taobao.org

2.5 nrm 自由切换

nrm 详细地址

3. nvm 切换 node 版本

window 安装nvm

mac oh-my-z 安装

要注意的是 mac 和 linux 下 nvm use 只是临时切换node 版本，要永久的切换示例如：nvm alias default 8.11.3。

4. 写一个 npm-cli 包发布流程

代码地址

通过npm写一个cli命令行工具来了解，具体步骤如下：

步骤1. 项目初始化 和 cli 的业务逻辑

#! /usr/bin/env node 一定要声明，表示程序是nodejs执行的

#! /usr/bin/env node

console.log('hello world');

步骤2. bin/cli 引入执行程序文件

|__bin
   |__ say.js

say.js 内容

require('../index.js')

步骤3. package.json

"main": "./src/index.js",
"bin": {
  "mkcli": "bin/say"
},

步骤4. 登录和发布

在登录前，先保证npm源是npm网站的（发布完了，再改回淘宝源）

npm config set registry https://registry.npmjs.org/

登录发布

npm login
npm publish

问题： 制作npm的cli，下载安装，执行命令，提示不是内部命令?

执行文件里面没有声明：#!/usr/bin/env node

5. npm 多命令执行

• & 表示并发执行
• && 表示串行执行

需要注意，使用 & 和 && 执行会导致命令很长。这里我们可以使用 npm-run-all 简化命令。示例如下

未简化前

npm run cli1 &&  npm run cli2 && npm run cli3

简化后

npm-run-all cli1 cli2 cli3

当然了，这里可以通过 nodejs 或者 scripty + shell 可以实现精简代码。

6. npm run cli 的参数问题

代码地址

错误代码示例：

{
  "lint:js": "eslint *.js",
  "lint:js:fix": "eslint *.js --fix"
}

正确代码示例：

{
  "lint:js": "eslint *.js",
  "lint:js:fix": "npm run lint:js -- --fix"
}

npm run lint:js --fix 不会修复不符合规范js，必须是 npm run lint:js -- --fix。 -- --fix 是 npm run lint:js:fix 命令传递的额外参数。

另外也有 npm 包专门获取参数，如：minimist

7. npm script 日志情况

• npm test -s 或 npm test --loglevel silent命令执行， 输出日志模式为简洁。
• npm test -d 或者 npm test --loglevel verbose 或者 npm test --verbos 命令执行，输出日志模式为详细，在排查错误信息是非常有用的。

8. npm script 的钩子

代码地址

这个用处不大，但是要了解，还是那句话，知道它没有用，就是最大用处。

示例：

{
  // ...
  "scripts": {
    "predemo": "echo predemo",
    "demo": "echo demo",
    "postDemo": "echo postDemo"
  }
  // ...
}

执行 npm run demo，就相当于执行 npm run predemo && npm run demo && npm run postDemo。

这样会造成命令的冗余，意义不大。

9. npm 的环境变量

执行 npm run env（npm 提供的）会打印出，预定义变量，通常两种：

• npm_config_ 为前缀的。
• npm_package_ 为前缀的。

npm_config_ 为前缀的变量是全局性的，一般很少设置，设置是通过 npm config set命令的。目前，来说能够用到就是设置 npm 下载的源。

npm_package 为前缀的变量是当前 package.json 的值，可以一一对应。

这里以 npm_package 做一个示例：

{
  // ...
  "name": "yourname",
  "script": {
    "sayName": "echo $npm_package_name"
  }
  // ...
}

运行 npm run sayName，命令窗口会打印出 yourname。

10. 平台的兼容问题

10.1 文件操作命令问题

rm、cp、mkdir 这些命令在 window 的 cmd 是不支持，直接用 cmder 或 git bash等工具来解决，也可以下载对应的npm包来解决。

10.2 用 cross-var 引用变量

linux 的变量引用方式是 $npm_package_name, window 则是 %npm_package_json%，可以使用 cross-var 来解决。

ps: cross-var 自带 babel, 如果要轻量话，建议用 cross-var-no-babel。

示例

{
  "scripts": {
    "demo": "cross-var echo $npm_package_name"
  }
}

10.3 用 cross-env 设置环境变量

linux 和 Windows 配置环境方式不同，为了兼容，可以用 cross-env。先了解一下 linux 和 windows 配置环境的方式吧。

Windows 临时配置

#node中常用的到的环境变量是NODE_ENV，首先查看是否存在 
set NODE_ENV 
#如果不存在则添加环境变量 
set NODE_ENV=production 
#环境变量追加值 set 变量名=%变量名%;变量内容 
set path=%path%;C:\web;C:\Tools 
#某些时候需要删除环境变量 
set NODE_ENV=

linux 临时配置

#node中常用的到的环境变量是NODE_ENV，首先查看是否存在
echo $NODE_ENV
#如果不存在则添加环境变量
export NODE_ENV=production
#环境变量追加值
export path=$path:/home/download:/usr/local/
#某些时候需要删除环境变量
unset NODE_ENV
#某些时候需要显示所有的环境变量
env

使用 cross-env 解决的示例：

{
// ...
  "scripts": {
    "demo2": "cross-var echo $npm_package_name",
    "demo1": "cross-env NODE_ENV=test node src/index.js"
  }
// ...
}

11. scripty、shelljs、child_procss.exec 三者使用情况

这个三个使用的api，在使用查询，我要知道他们有些区别。

• scripty + shell 脚本把命令拆分，学习成本大，有平台兼容问题
• 用 shelljs + nodejs 可写些复杂，学习成本不大，平台兼容问题少
• shelljs 是基于 child_procss 模块封装，有时不需它封装的多余功能，我们可以使用 nodejs 自带 child_process 模块

12 npm Semver 版本管理

npm 版本管理，有两类：

• 消费 npm 包版本管理（业务项目中，安装npm包的版本管理）
• 发布 npm 包版本管理

这里主要说说发布 npm 包版本管理，发布 npm 包版本管理遵守 semver 版本规范

了解 semver 之后，npm 如何自动化改变版本号？主要通过npm version major/prepathc/...，npm version 参数的不熟悉，可以通过 npm version --help 查看详细参数说明。

12.1 自动生产版本的命令

假设版本的格式是这样的——x.y.z，具体命令npm script 如下

"version:x": "npm run version -- patch",
"version:y": "npm run version -- minor",
"version:t": "npm run version -- major"

另外，还有测试版本，注意 1.0.1-beta.1 和 1.0.1-alpha.2，是 npm v6.4.x 以上的版本才能生成，具体命令如下：

npm version prerelease --preid=alpha

至于npm Semver 的 beta 和 aphla 是否需要？这个取决于项目开发的规范，类似2个前端团队需要走20人前端研发流程吗？显然不需要。

12.2 release-it 还得考虑私仓库问题

也有专门版本管理如 release-it，如果你使用 release-it，就得考虑私仓 npm 源的问题，解决方法 : npm run arelease --registry=xxxxx私仓。

参考地址

参考地址

npm alpha 版本参考地址

13 npm tag vs. npm version

npm tag 和 npm version 的信息是一样的，但是他们两是相互独立、互不干扰。我们可以这样理解： npm 的 tag 可以理解类似 git 的tag。 npm 的 version 可以理解类似 commit，不停向前，需要特殊处理，才能回退。

13.1 查看所有 tag

npm dist-tag ls

13.2 查看所有 version

npm view my-package versions

13.3 给 tag 设置最新的version(the latest)

npm dist-tag add my-package@1.0.0 latest

13.4 把1.0.0-alpha.1更新到最新的测试版

npm dist-tag add my-package@1.0.0 latest

13.4 删除

npm不鼓励任何形式的删除，主要因为我们发布的包可能已经被其他人引用，如果我们删除了此包，其他人在重新安装含有我们包的依赖的工程时，出现找不到包问题。 基于此，npm做了相关的删除限制：

• 删除的版本24小时后方可重发!
• 只有发布72小时之内的包可以删除!

npm unpublish my-npm-pkg --force

删包有风险，npm 提供另一条命令，废弃某个版本，当使用者下载，会得到警告：

npm deprecate <pkg>[@<version>] <message>

发包参考地址 删包参考地址

14、启动多个子进程 concurrently

我们在开发的时候，想要开启 mock 数据服务，也开启页面调试服务，不使用工具，在两个命令行终端输入命令。如果是 concurrently 可以在一个命令终端，执行一个命令就可以了。

# 终端1
npm run mock 

# 终端2
npm run dev

使用 concurrently

concurrently \"npm run dev \"npm run mock

总结

npm 的基础点知识实在太多，不在搬运了，上面所用的基本上解决我80%问题。

(完)