前言

一直很好奇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",

前端package.json中的scripts相关推荐

【前端工程化】配置package.json中scripts命令脚本，新手必学
每日鸡汤:你总要努力追上那个曾经被赋予众望的自己吧目录前言一.运行npm run 命令之后会干啥? 1. scripts里面写啥 2. node_modules/.bin 二进制可执行文件二. ...
webpack：package.json中scripts的作用
webpack:package.json中scripts的作用为了在执行命令的时候输入太长的命令,我们可以将要执行的命令配置到 package.json的scripts中,因为scripts中配置可 ...
npm更新模块并同步到package.json中
使用原始npm 1.查看需要更新的版本 npm outdated 该命令会列出所有需要更新的项目 2.修改package.json中需要更新的包对应的版本号 npm update 由于npm upda ...
Node.js中package.json中库的版本号详解(^和~区别)
Node.js中package.json中库的版本号详解(^和~区别) 当我们查看package.json中已安装的库的时候,会发现他们的版本号之前都会加一个符号,有的是插入符号(^),有的是波浪符号 ...
android中json插件,【Android原生插件】package.json中关于第三方aar的配置
按照文档(https://ask.dcloud.net.cn/article/35414)所说: dependencies节点特殊说明 android插件中集成的第三方SDK 如果是jar或so放入到 ...
在package.json中使用git URL依赖分支或标记？
本文翻译自:Depend on a branch or tag using a git URL in a package.json? Say I've forked a node module wit ...
package.json 中的波浪号（~）和插入符号（^）有什么区别？
问题描述: 在我升级到最新的稳定版 node 和 npm 后,我尝试了 npm install moment --save.它使用插入符号 ^ 前缀将条目保存在 package.json 中.以前,它 ...
package.json中private选项的作用
如果你"private": true在package.json中设置,那么npm将拒绝发布它. 这是一种防止意外发布私有存储库的方法.如果您希望确保仅将某个包发布到特定注册表(例如 ...
package.json中bin字段的用处
如下是一段package.json中的代码,其中可以看到版本号等信息,除此之外还能看到一个bin字段,本文主要讲的就是bin字段的用处 {"name": "mys-gj& ...

前端package.json中的scripts

前言

什么是scripts

自定义脚本命令

示例

前端package.json中的scripts相关推荐

最新文章

热门文章