前言
一直很好奇package.json里的scripts属性，查了一下文章，问了一下公司里的前辈。大体上理解了，因此写这篇文章来记录一下。
本文默认你前端项目已经安装并配置了相关依赖。添加链接描述
参考文章：阮一峰 npm scripts 使用指南
什么是scripts
package.json官方文档 是这样说的：
scripts 定义了一组可以运行的 node 脚本。可以通过调用 npm run XXXX 或 yarn XXXX 来运行它们，其中 XXXX 是命令的名称。 例如：npm run dev。
查看命令
查看当前项目的所有 npm 脚本命令，可以使用不带任何参数的npm run命令。
npm run
感觉有点鸡肋，定义的命令是可以在package.json中看到的
原理
npm 脚本的原理非常简单。每当执行npm run，就会自动新建一个 Shell，在这个 Shell 里面执行指定的脚本命令。因此，只要是 Shell（一般是 Bash）可以运行的命令，就可以写在 npm 脚本里面。
比较特别的是，npm run新建的这个 Shell，会将当前目录的node_modules/.bin子目录加入PATH变量，执行结束后，再将PATH变量恢复原样。
这意味着，当前目录的node_modules/.bin子目录里面的所有脚本，都可以直接用脚本名调用，而不必加上路径。因此package.json里看到的命令都没有加上路径
通配符
由于 npm 脚本就是 Shell 脚本，因为可以使用 Shell 通配符。
"lint": "jshint *.js"
"lint": "jshint **/*.js"
上面代码中，*表示任意文件名，**表示任意一层子目录。
如果要将通配符传入原始命令，防止被 Shell 转义，要将星号转义。
"test": "tap test/\*.js"
传参
向 npm 脚本传入参数，要使用--标明。
"lint": "jshint **.js"
向上面的npm run lint命令传入参数，必须写成下面这样。
npm run lint -- --reporter checkstyle > checkstyle.xml
也可以在package.json里面再封装一个命令。
"lint": "jshint **.js",
"lint:checkstyle": "npm run lint -- --reporter checkstyle > checkstyle.xml"
更推荐第二种方式
执行顺序
如果 npm 脚本里面需要执行多个任务，那么需要明确它们的执行顺序。
如果是并行执行（即同时的平行执行），可以使用&符号。
npm run script1.js & npm run script2.js
如果是继发执行（即只有前一个任务成功，才执行下一个任务），可以使用&&符号。
$ npm run script1.js && npm run script2.js
常用脚本示例
// 删除目录
"clean": "rimraf dist/*",
// 本地搭建一个 HTTP 服务
"serve": "http-server -p 9090 dist/",
// 打开浏览器
"open:dev": "opener http://localhost:9090",
// 实时刷新
"livereload": "live-reload --port 9091 dist/",
// 构建 HTML 文件
"build:html": "jade index.jade > dist/index.html",
// 只要 CSS 文件有变动，就重新执行构建
"watch:css": "watch 'npm run build:css' assets/styles/",
// 只要 HTML 文件有变动，就重新执行构建
"watch:html": "watch 'npm run build:html' assets/html",
// 部署到 Amazon S3
"deploy:prod": "s3-cli sync ./dist/ s3://example-com/prod-site/",
// 构建 favicon
"build:favicon": "node scripts/favicon.js",
这些脚本还是很有用的，可以在这些脚本的基础上进行改写
注： 其他内容略，可以自行查看 阮一峰 npm scripts 使用指南
自定义脚本命令
上面介绍了一些基本知识点，下面说一下如何自定义脚本命令
命令名称
看了很多脚本命令，命令名基本就是下面3种
//纯字母
"build": "vue-cli-service build",
//字母加中划线
"build-prod": "vue-cli-service build --mode prod",
//字母加冒号
"lint:stylelint": "stylelint src/**/*.{vue,css,scss} --fix",
编写命令
1、借助 上面介绍的通配符、传参、执行顺序
2、基于依赖本身提供的命令
示例
eslint示例：
"lint:eslint": "eslint --cache --max-warnings 0 \"packages/**/*.{vue,js,ts,tsx}\" --fix",
--cache
存储处理过的文件的信息以便只对有改变的文件进行操作。缓存默认被存储在 .eslintcache。启用这个选项可以显著改善 ESLint 的运行时间，确保只对有改变的文件进行检测。
--max-warnings
这个选项允许你指定一个警告的阈值，当你的项目中有太多违反规则的警告时，这个阈值被用来强制 ESLint 以错误状态退出。
通常情况下，如果 ESLint 运行过程中，没有出现错误（只有警告），它将以成功的状态退出。然而，如果指定了 --max-warnings，而且警告的总数超过了指定的阈值，ESLint 将以错误的状态退出。通过指定一个 -1 的阈值或省略这个选项将会避免这种行为。
\"packages/**/*.{vue,js,ts,tsx}\"
使用\对双引号进行了转义。
指定校验packages目录下所有以.vue、.js、.ts、.tsx结尾的文件
--fix
该选项指示 ESLint 试图修复尽可能多的问题。修复只针对实际文件本身，而且剩下的未修复的问题才会输出。不是所有的问题都能使用这个选项进行修复，该选项在以下情形中不起作用：
- 当代码传递给 ESLint 时，这个选项抛出一个错误。
- 该选项对使用处理器的代码没有影响，除非处理器选择允许自动修复。
stylelint示例
"lint:stylelint": "stylelint src/**/*.{vue,css,scss} --fix",