npm script 的基础总结

demo 代码地址

1. npm 命令详解

博客园 白树 npm 命令详解

阮一峰npm模块管理

须要说明：npm link 在使用 ui 组件库的脚手架 和 业务组件库脚手架，若是二者的脚手架的配置不一致，建议不能使用 npm link，多半会配置冲突，必须上传 npm 库使用。

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 包发布流程

代码地址

经过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 模块

待续