前端package.json中的scripts

前言

一直很好奇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示例：

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",